js 拖拽功能的实现源码

⼀个元素的拖拽过程，我们可以分为三个步骤，第⼀步是⿏标按下⽬标元素，第⼆步是⿏标保持按下的状态移动⿏标，第三步是⿏标抬起，拖拽过程结束。

这三步分别对应了三个事件，mousedown 事件，mousemove 事件和 mouseup 事件。只有在⿏标按下的状态移动⿏标我们才会执⾏拖拽事件，因此我们需要在 mousedown 事件中设置⼀个状态来标识⿏标已经按下，然后在 mouseup 事件中再取消这个状态。在 mousedown 事件中我们⾸先应该判断，⽬标元素是否为拖拽元素，如果是拖拽元素，我们就设置状态并且保存这个时候⿏标的位置。然后在 mousemove 事件中，我们通过判断⿏标现在的位置和以前位置的相对移动，来确定拖拽元素在移动中的坐标。

最后 mouseup 事件触发后，清除状态，结束拖拽事件。

这里我将提供一个简单的拖拽功能实现，你可以根据自己的需求进行修改和扩展。

HTML 结构如下：

html

<div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute; cursor: move;">

    拖拽我

</div>

JavaScript 代码如下：

javascript

// 获取拖拽元素

var draggable = document.getElementById('draggable');

// 初始位置

var initX, initY;

// 鼠标按下事件

draggable.onmousedown = function(e) {

    // 获取鼠标按下时的位置

    initX = e.clientX - draggable.offsetLeft;

    initY = e.clientY - draggable.offsetTop;

    // 鼠标移动事件

    document.onmousemove = function(e) {

        // 计算元素的新位置

        var newX = e.clientX - initX;

        var newY = e.clientY - initY;

        // 设置元素的新位置

        draggable.style.left = newX + 'px';

        draggable.style.top = newY + 'px';

    };

    // 鼠标松开事件

    document.onmouseup = function() {

        // 取消鼠标移动和松开事件

        document.onmousemove = null;

        document.onmouseup = null;

    };

    // 阻止默认行为，防止选择文本

    return false;

};

这段代码实现了以下功能：

当鼠标按下拖拽元素时，记录鼠标相对于元素的位置。

当鼠标移动时，计算元素的新位置，并更新元素的 left 和 top 属性，实现拖拽效果。

当鼠标松开时，取消鼠标移动和松开事件，结束拖拽。

注意：这个简单的实现可能在一些复杂场景下存在问题，例如当页面有滚动条时，或者当拖拽元素被其他元素遮挡时。在实际应用中，你可能需要更复杂的逻辑来处理这些问题。