JavaScript拖拽效果的原理及实现
程序员文章站
2022-06-22 08:42:17
JavaScript拖拽效果的原理及实现 JavaScript中实现拖拽效果需要用到 事件侦听 和 鼠标事件 。事件侦听是对被拖拽的元素添加事件侦听，包括mousedown,mousemove,mouseup。 常见的拖拽操作基本就是下面的方式： 1、用鼠标点击选中被拖拽的元素 2、按住鼠标不放，拖 ......
javascript拖拽效果的原理及实现
javascript中实现拖拽效果需要用到事件侦听和鼠标事件。事件侦听是对被拖拽的元素添加事件侦听，包括mousedown,mousemove,mouseup。
常见的拖拽操作基本就是下面的方式：
1、用鼠标点击选中被拖拽的元素
2、按住鼠标不放，拖动鼠标
3、拖拽元素到一定位置，放开鼠标实现拖拽的效果
在逆战班的学习中一些情况下还需要用到mouseleave。这里讲述的案例是存在多个元素情况下的拖拽。
以下先展示拖拽效果，如下所示：
具体的代码如下所示：
1.创建div元素并设置简单的css样式
<style>
div {
width: 50px;
height: 50px;
background-color: blue;
text-align: center;
position: absolute; /*设置的这些div默认重叠在页面左上角*/
}
</style>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
2.每一个div都需要有一个侦听事件，才能实现所有的div都有拖拽效果。代码如下
var divs = document.queryselectorall("div"); //获取div元素的伪数组集合
for (var i = 0; i < divs.length; i++) {
//利用for循环，给每个div添加一个鼠标按下的事件，来触发函数mousehandler
divs[i].addeventlistener("mousedown", mousehandler);
}
3.函数mousehandler的主体部分了，这里我采用的是if，else if来写。
function mousehandler(e) {
//通过判断事件的类型来执行对应的条件语句
if (e.type === "mousedown") {
e.preventdefault();
//这里将e.target赋给document.div,相当于设了一个局部变量，在触发mousemove事件后，
//再次进入函数时，保证触发事件的div就是我们要改变位置的那个div
document.div = e.target;
//这里也是将鼠标相对拖拽的那个div元素
//左上角的位置，设置成一个对象进行保存其实相当于如下两条
document.offset = { x: e.offsetx, y: e.offsety };
//document.offsetx=e.offsetx;将e.offsetx赋值给自定义变量document.offsetx
//document.offsety=e.offsety;将e.offsety赋值给自定义变量document.offsety
//和上面是两种写法
//在鼠标点击后，如果发生鼠标移动事件，则再次进入该函数进行执行鼠标移动的执行语句
document.addeventlistener("mousemove", mousehandler);
//在鼠标点击后，如果发生鼠标释放事件，则再次进入该函数进行执行，则再次进入该函数进行执行鼠标释放的执行语句
document.addeventlistener("mouseup", mousehandler);
} else if (e.type === "mousemove") {
//判断触发的事件类型是mousemove之后执行
//这里的document.div和document.offset.x都是之前定义好的变量，用e.clientx-document.offset.x
//是因为元素的position位置是相对元素的左上顶点的位置的，因此鼠标所在的位置值不能直接赋给它。
document.div.style.left = e.clientx - document.offset.x + "px";
document.div.style.top = e.clienty - document.offset.y + "px";
} else if (e.type === "mouseup") {
//如果鼠标释放，则执行移除事件侦听
document.removeeventlistener("mousemove", mousehandler);
document.removeeventlistener("mouseup", mousehandler);
}
}