js拖拽效果的原理和实现
标签：一个 cto fun 移动 使用 了解 相对 最简 删除
让我们了解一下最简单的拖拽效果：
1.首先我们先设置一个div,然后简单设置一下样式：
div{
width:50px;
height: 50px;
background-color: red;
position: absolute;
}
2.然后我们编写js部分，我们要清楚，元素的拖拽分三个部分：鼠标左键按下、拖动鼠标元素跟着移动、以及鼠标左键抬起停止拖拽元素停止移动
var div = document.querySelector("div"); //这里我们需要知道：1>按下时开始监听在文档中鼠标移动的事件
2>开始监听鼠标松开键的事件
3>只有按下时才准备拖拽
4>当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
div.onmousedown = function (e1) { //这里对鼠标按下事件执行事件，分别对鼠标移动和鼠标抬起情况下进行设置
document.onmousemove = function (e) { //当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
div.style.left = e.clientX - e1.offsetX + "px"; //因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置,使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
div.style.top = e.clientY - e1.offsetY + "px";
}
document.onmouseup = function () { //当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
document.onmousemove = null;
document.onmouseup = null;
}
}
最后我们再执行页面，元素就能够跟着拖动了
js拖拽效果的原理和实现
标签：一个 cto fun 移动 使用 了解 相对 最简 删除
原文地址：https://www.cnblogs.com/zcx980320/p/12642358.html
评论