JS原生拖放功能的实现模拟拖拽效果

时间：7年前阅读：6083

原理:

　　模拟拖拽最终效果和在桌面上移动文件夹的效果类似

鼠标按下时，拖拽开始。鼠标移动时，被拖拽元素跟着鼠标一起移动。鼠标抬起时，拖拽结束

　　所以，拖拽的重点是确定被拖拽元素是如何移动的

假设，鼠标按下时，鼠标对象的clientX和clientY分别为x1和y1。元素距离视口左上角x轴和y轴分别为x0和y0

　　鼠标移动的某一时刻，clientX和clientY分别为x2和y2

　　所以，元素移动的x轴和y轴距离分别为x2-x1和y2-y1

　　元素移动后，元素距离视口左上角x轴和y轴的位置分别为

X = x0 + (x2-x1)

Y = y0 + (y2-y1)

代码实现

　　将上面的原理用代码实现如下

　　鼠标按下时，初始态的x0和y0分别用offsetLeft和offsetTop表示

　　鼠标移动时，瞬时态的x和y分别赋值为定位后元素的left和top

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test" style="height:100px;width:100px;background:pink;position:absolute;top:0;left:0;"></div>
<script>
test.onmousedown = function(e){
    e = e || event;
    //获取元素距离定位父级的x轴及y轴距离
    var x0 = this.offsetLeft;
    var y0 = this.offsetTop;
    //获取此时鼠标距离视口左上角的x轴及y轴距离
    var x1 = e.clientX;
    var y1 = e.clientY;

    test.onmousemove = function(e){
        e = e || event;
        //获取此时鼠标距离视口左上角的x轴及y轴距离
        x2 = e.clientX;
        y2 = e.clientY;    
        //计算此时元素应该距离视口左上角的x轴及y轴距离
        var X = x0 + (x2 - x1);
        var Y = y0 + (y2 - y1);
        //将X和Y的值赋给left和top，使元素移动到相应位置
        test.style.left = X + 'px';
        test.style.top = Y + 'px';
    }

    test.onmouseup = function(e){
        //当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可
        test.onmousemove = null;
    }
}
</script>
	</body>
</html>

效果图片：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

JS原生拖放功能的实现模拟拖拽效果

网友评论