JS 原生实现拖拽功能

序言

我们有时候功能中会涉及到拖拉拽模块功能，但有时候也是束手无策，不知道该怎么去写，那我们接下来剖析一下吧

功能实现

创建元素

<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);