序言
我们有时候功能中会涉及到拖拉拽模块功能,但有时候也是束手无策,不知道该怎么去写,那我们接下来剖析一下吧
功能实现
创建元素
<div id="draggableElement">k可以拖拽的元素</div>
获取元素
// 获取元素的id为draggableElement
var draggable = document.getElementById('draggableElement');
逻辑处理
// 定义鼠标按下时触发的事件处理程序
function handleMouseDown(event) {
// 记录当前鼠标位置与被拖动元素之间的相对位移量
var offsetX = event.clientX - draggable.offsetLeft;
var offsetY = event.clientY - draggable.offsetTop;
// 在鼠标移动过程中持续更新被拖动元素的位置
function handleMouseMove(event) {
draggable.style.left = (event.clientX - offsetX) + 'px';
draggable.style.top = (event.clientY - offsetY) + 'px';
}
// 在鼠标松开时取消鼠标移动事件的监听
function handleMouseUp(event) {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
}
// 将鼠标移动事件和鼠标松开事件分别注册到文档上
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
事件绑定
// 将鼠标按下事件注册到被拖动元素上
draggable.addEventListener('mousedown', handleMouseDown);