如何使用div完成拖拽效果
law-chain-hot opened this issue · 1 comments
law-chain-hot commented
如何使用div完成拖拽效果
关键是3个mouse事件
- mousedown: 激活dragging
- mouseup: 关闭dragging
- mousemove: 计算位置
Codepen.io效果地址
注意
有小细节需要特别注意
addEventListener
最好加载document
上面,不然鼠标移动太快会掉帧,即无法捕捉moveEle这个事件,但是用document
的话,mousedown这个事件一直存在- 我在这页代码用的
moveEle.addEventListener
,codepen上面用的documnet - 其他的需要记得的API
getBoundingClientRect()
e.clientX
moveEle.style.left = moveX + 'px'
代码
HTML
<div class="move-container">
<div class="move" style="position:absolute; width:100px; height:100px; background:gold">
</div>
</div>
JS
let moveEle = document.querySelector("#move");
let dragging = false;
let relaDistanceX = 0;
let relaDistanceY = 0;
// 1. MouseDown
moveEle.addEventListener("mousedown", e => {
if (e.target == moveEle) {
//active dragging
dragging = true;
var moveEleDis = moveEle.getBoundingClientRect();
relaDistanceX = e.clientX - moveEleDis.left;
relaDistanceY = e.clientY - moveEleDis.top;
}
});
// 2. MouseUp
moveEle.addEventListener("mouseup", e => {
dragging = false;
});
// 3. MouseMove
moveEle.addEventListener("mousemove", e => {
if (dragging) {
//deploy the distance
moveEle.style.left = e.clientX - relaDistanceX + 'px';
moveEle.style.top = e.clientY - relaDistanceY + 'px';
}
});
law-chain-hot commented
2020.02.25更新
可以使用
tLeft = e.offsetX
tTop = e.offsetY
其中 event.offsetX
指:
offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。
最后发现一张好图,来自https://segmentfault.com/a/1190000002405897
[JS基础篇--了解JS的clientX、pageX、screenX等方法来获取鼠标坐标详解]