元素拖拽到另一个地方

来源：互联网发布：lrc制作软件编辑：程序博客网时间：2024/06/10 06:18

很多时候，发现页面弹出的显示框能够挪动，如何实现呢？

其实就是事件监听罢了。

思路：1，因为可以拖动，所以该元素的定位是绝对定位而不是相对定位；

2，当鼠标按下时才可以拖动，需要鼠标点击动作，onmousedown;

3，鼠标移动时元素跟随鼠标移动，onmousemove;

4，鼠标抬起时元素不在可以拖动；onmouseup;

5，鼠标移动的横纵长度可用鼠标移动中得到坐标减去该元素的left和top值。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
</head>
<body>
<div class="move-container">
<div class="move" style="position:absolute; width:100px; height:100px; background:gray">
</div>
</div>
<script>
var moveElem = document.querySelector('.move'); //待拖拽元素

var dragging; //是否激活拖拽状态
var tLeft, tTop; //鼠标按下时相对于选中元素的位移

//监听鼠标按下事件
document.addEventListener('mousedown', function(e) {
if(e.target == moveElem) {

dragging = true; //激活拖拽状态
var moveElemRect = moveElem.getBoundingClientRect();
tLeft = e.clientX - moveElemRect.left; //鼠标按下时和选中元素的坐标偏移:x坐标
tTop = e.clientY - moveElemRect.top; //鼠标按下时和选中元素的坐标偏移:y坐标
}
});

//监听鼠标放开事件
document.addEventListener('mouseup', function(e) {
dragging = false;
});

//监听鼠标移动事件
document.addEventListener('mousemove', function(e) {
if(dragging) {
var moveX = e.clientX - tLeft,
moveY = e.clientY - tTop;

moveElem.style.left = moveX + 'px';
moveElem.style.top = moveY + 'px';
}
});
</script>
</body>
</html>

阅读全文

1 0