精华内容
下载资源
问答
  • 移动端拖动元素

    2020-06-04 23:09:41
    移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素; 拖动元素需要当前手指的坐标值 可以使用targetTouches[0]里面的pageX和pageY; 移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用...

    移动端拖动元素

    1. touchstart、touchmove、touchend可以实现拖动元素;
    2. 拖动元素需要当前手指的坐标值 可以使用targetTouches[0]里面的pageXpageY;
    3. 移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离;
    4. 手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置;

    拖动元素三部曲:

    1. 触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置;
    2. 移动手指touchmove:计算手指滑动距离,并且移动盒子;
    3. 离开手指touchend;

    注意:手指移动也会触发滚动屏幕,所以这里要阻止默认的屏幕滚动e.preventDefault();

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<style>
    		*{margin: 0;;}
    		div{width: 60px;height: 60px;background-color: pink;position: relative;}
    	</style>
    </head>
    <body>
    	<div></div>
    	<script>
    		var div=document.querySelector('div');
    		//获取手指初始坐标
    		var startX=0;
    		var startY=0;
    		// 获取盒子原先的位置
    		var x=0;
    		var y=0;
    		div.addEventListener("touchstart",function(e){
    			//获取手指初始坐标
    			startX=e.targetTouches[0].pageX;
    			startY=e.targetTouches[0].pageY;
    			// 获取盒子原先的位置
    			x=this.offsetLeft;
    			y=this.offsetTop;
    			console.log(x)
    			console.log(y)
    		});
    		div.addEventListener("touchmove",function(e){
    			// 计算手指的移动距离:手指移动之后的坐标减去手指初始的坐标
    			var moveX=e.targetTouches[0].pageX-startX;
    			var moveY=e.targetTouches[0].pageY-startY;
    			// y移动盒子
    			this.style.left=x+moveX+'px';
    			this.style.top=y+moveY+'px';
    			e.preventDefault();//阻止屏幕滚动的默认行为
    		})
    	</script>
    </body>
    </html>
    
    展开全文
  • } style> head> <body> <div>div> <script> // (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置 // (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 // (3) 离开手指 ...

    在这里插入图片描述
    实现:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                /* 绝对定位,脱离文档流 */
                position: absolute;
                left: 0;
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <div></div>
        <script>
            // (1) 触摸元素 touchstart:  获取手指初始坐标,同时获得盒子原来的位置
            // (2) 移动手指 touchmove:  计算手指的滑动距离,并且移动盒子
            // (3) 离开手指 touchend:
            var div = document.querySelector('div');
            var startX = 0; //获取手指初始坐标
            var startY = 0;
            var x = 0; //获得盒子原来的位置
            var y = 0;
            div.addEventListener('touchstart', function(e) {
                //  获取手指初始坐标
                startX = e.targetTouches[0].pageX;
                startY = e.targetTouches[0].pageY;
                x = this.offsetLeft;
                y = this.offsetTop;
            });
    
            div.addEventListener('touchmove', function(e) {
                //  计算手指的移动距离: 手指移动之后的坐标减去手指初始的坐标
                var moveX = e.targetTouches[0].pageX - startX;
                var moveY = e.targetTouches[0].pageY - startY;
                // 移动我们的盒子 盒子原来的位置 + 手指移动的距离
                this.style.left = x + moveX + 'px';
                this.style.top = y + moveY + 'px';
                e.preventDefault(); // 阻止屏幕滚动的默认行为
            });
        </script>
    </body>
    
    </html>
    
    展开全文
  • 本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码,供大家参考,具体内容如下 实现效果: 请切换到移动端页面查看! 代码实现: <!DOCTYPE html> <html lang=en> <head> <meta ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...Do
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                height: 2000px;
            }
    
            .backToTop {
                background-color: #fff;
                border: 1px solid grey;
                border-radius: 50%;
                height: 30px;
                width: 30px;
                line-height: 30px;
                position: fixed;
                right: 0px;
                bottom: 0px;
                text-align: center;
                text-decoration: none;
                color: grey;
                -webkit-tap-highlight-color: transparent;
            }
        </style>
    </head>
    
    <body>
        <a href="#" id="backToTop" class="backToTop">top</a>
    </body>
    <script>
        var ele = document.getElementById("backToTop");
    
        // 记录的是元素当前位置
        var currentPosition = { x: 0, y: 0 };
    
        // 手指偏移位置,是touchmove中的坐标减去刚触摸时候的坐标得到并更新
        var offset = {};
    
        // 手指刚触摸时候的坐标
        var touchStartPositon = {};
    
        // 移动标志,主要用来解决touchend中currentPosition无意义累加的问题,下方会说明什么是无意义累加
        var moveFlag = false;
    
        // 监听,冒泡
        ele.addEventListener('touchstart', touchStart, false)
        ele.addEventListener('touchmove', touchMove, false)
        ele.addEventListener('touchend', touchEnd, false)
    
        function touchStart(e) {
            var touch = e.targetTouches[0];
            // 触摸时候记录手指初始位置
            touchStartPositon.x = touch.pageX;
            touchStartPositon.y = touch.pageY;
        }
        function touchMove(e) {
            moveFlag = true;
    
            // 屏蔽默认函数,当有上下滚动条时候,touchMove默认的是滚动屏幕
            e.preventDefault();
            var touch = e.changedTouches[0];
    
            // 得到用户拖动的相对x y距离,记录在offset中
            offset.x = touch.pageX - touchStartPositon.x;
            offset.y = touch.pageY - touchStartPositon.y;
    
            // offset + currentPostion就是css要移动的距离
            move({ x: currentPosition.x + offset.x, y: currentPosition.y + offset.y });
    
        }
        function touchEnd(e) {
            
            if (!moveFlag) return;
    
            // 无意义累加就在这里:
            // 用户第一次操作:完成一次拖动,此时offset中x y是有值的
            // 用户第二次操作:点击元素但是没有拖动,currentPostion就会加上offset中的值
            // 用户第三次操作:再次拖动,currentPositon中的值就不准了,因为多加了一次offset
            // 所以判断如果是moveFlag = false时候就直接退出
            currentPosition.x += offset.x
            currentPosition.y += offset.y
            // 对于无意义累加问题,当然也可以通过把offset置位o来解决
            // offset = { x: 0, y: 0 };
            moveFlag = false;
    
        }
    
        function move(param) {
            // 利用transform属性做到移动
            ele.style.transform = "translate3d(" + param.x + "px, " + param.y + "px, 0)"
        }
    
    </script>
    
    </html>
    
    展开全文
  • 移动端 拖拽元素

    2020-08-19 21:34:08
    ** (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置 (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 (3) 离开手指 touchend:** e.targetTouches[0].pageX 、e....

    ** (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置
    (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
    (3) 离开手指 touchend:**

    e.targetTouches[0].pageX 、e.targetTouches[0].pageY
    这两个为手指移动时 在页面上的坐标;

    <script>
    	    var div = document.querySelector('div');
            var startX = 0; 
            var startY = 0;
            var x = 0; 
            var y = 0;
            div.addEventListener('touchstart', function(e) {
                //  获取手指初始坐标
                startX = e.targetTouches[0].pageX;
                startY = e.targetTouches[0].pageY;
                x = this.offsetLeft;
                y = this.offsetTop;
            });
    
            div.addEventListener('touchmove', function(e) {
                //  计算手指的移动距离: 手指移动之后的坐标减去手指初始的坐标
                var moveX = e.targetTouches[0].pageX - startX;
                var moveY = e.targetTouches[0].pageY - startY;
                // 移动我们的盒子 盒子原来的位置 + 手指移动的距离
                this.style.left = x + moveX + 'px';
                this.style.top = y + moveY + 'px';
                e.preventDefault(); // 阻止屏幕滚动的默认行为
            });
        </script>
    
    展开全文
  • 1. touchmove 移动端拖动响应事件 2. 手触屏拖动是当前X坐标:e.touches[0].clientX 3. 元素的原有特性失效:e.preventDefault(); 二、html5移动端:元素拖动(js) <!doctype html>   ...
  • 主要为大家详细介绍了Vue实现移动端拖拽交换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • JS移动端拖动元素

    2020-04-22 09:27:38
    移动端移动的核心思路:1、计算手指移动的距离:手指移动之后的坐标 -手指初始化坐标 2、盒子移动距离:手指移动的距离加上盒子初始化坐标 3、需要touchstart、touchmove 搭配使用 4、这时需要注意区分PC端的方法...
  • Vue移动端实现元素拖拽移动 <template> <div ref="dragBox" @touchstart="touchstartHandle('dragBox',$event)" ... 可拖拽元素 </div> </template> data() { return {
  • Vue 移动端拖拽交换位置

    千次阅读 2019-03-27 21:29:31
    点击图片删除, 拖拽可更改顺序,共4张 (false)'> 删除该图片? (true)' style="color: var(--mRed);">删除 (false)'>取消 export default { data () { return { files: [], fileItem: ...
  • 在开发移动端时候遇到了一个问题,拖着滑动元素会触发手机自带的事件,导致滑动不了或者是切屏了,目前找到了以下的解决方法: html{ touch-action:none; touch-action:pan-y; } var startX,startY; document....
  • html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽
  • JavaScript 移动端拖动元素

    千次阅读 多人点赞 2020-10-26 09:00:15
    请切换到移动端页面查看! 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
  • 第一步 下载hammer.js并引入 下载地址可以是:... } 第三步 直接调用drag方法,传入你要移动/缩放/旋转的元素,控制几个调用几次就行 比如,我需要控制的是class为a的div和class为b的div,则: drag('.a'); drag('.b');
  • 移动端拖拽事件

    2020-12-29 18:57:46
    1. 移动端怎样适配的 1.设置viewport <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 2.媒体查询 使用@media...
  • * 手指拖拽 * options参数控制水平或垂直方向是否可以拖拽 */ function drag(el, options) { options.x = typeof options.x !== 'undefined' ? options.x : true; //x方向是否允许拖拽 options.y = typeof ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...Documen...
  • 【插件】移动端元素拖拽、缩放 etool 常量 含义 START_TOP 元素起始 top(与 START_LEFT 一起可用于元素位置复位) START_LEFT 元素起始 left(与 START_TOP 一起可用于元素位置复位) START_WIDTH 元素起始 ...
  • } // clientX 当前手指位置距离当前body可视区域的x,y坐标 // this.position.x 手指按下时元素位置 //this.nx 元素每次相对于初始位置移动的坐标位置 this.nx = touch.clientX - this.position.x; this.ny = touch...
  • 移动端拖拽元素

    2021-06-04 22:55:22
    鼠标可以对元素进行拖拽元素随着鼠标的移动而移动。 主要用到了touchstart事件和touchmove事件。 核心思想: (1)点击元素时,获取初始位置: div.addEventListener('touchstart', function (e) { x = this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,440
精华内容 3,376
关键字:

移动端拖动元素