js中怎么监听鼠标的拖拽事件
时间: 2024-05-15 08:13:11 浏览: 15
可以通过在鼠标按下事件中绑定mousemove事件来实现鼠标拖拽事件的监听。
具体步骤如下:
1. 给需要拖拽的元素绑定mousedown事件,当鼠标按下时触发该事件。
2. 在mousedown事件中,记录下鼠标当前的位置和需要拖拽的元素的位置。
3. 给document对象绑定mousemove事件,在该事件中处理鼠标移动时元素的位置变化。
4. 在mousemove事件中,计算鼠标移动的距离,并根据距离更新需要拖拽的元素的位置。
5. 当鼠标松开时,解除document对象上的mousemove事件。
以下是一个示例代码:
```
var dragEle = document.getElementById('drag-ele');
var mouseX, mouseY, eleX, eleY;
var isDragging = false;
dragEle.addEventListener('mousedown', function(e) {
isDragging = true;
mouseX = e.pageX;
mouseY = e.pageY;
eleX = dragEle.offsetLeft;
eleY = dragEle.offsetTop;
});
document.addEventListener('mousemove', function(e) {
if (isDragging) {
var deltaX = e.pageX - mouseX;
var deltaY = e.pageY - mouseY;
dragEle.style.left = eleX + deltaX + 'px';
dragEle.style.top = eleY + deltaY + 'px';
}
});
document.addEventListener('mouseup', function() {
isDragging = false;
});
```