纯 JavaScript 实现拖拽功能：详细步骤与代码示例

<div id='draggable'>Drag me!</div>
<script>
var draggable = document.getElementById('draggable');

draggable.addEventListener('mousedown', function(e) {
    var offsetX = e.clientX - draggable.offsetLeft;
    var offsetY = e.clientY - draggable.offsetTop;

    document.addEventListener('mousemove', moveHandler);
    document.addEventListener('mouseup', upHandler);

    function moveHandler(e) {
        draggable.style.left = (e.clientX - offsetX) + 'px';
        draggable.style.top = (e.clientY - offsetY) + 'px';
    }

    function upHandler() {
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
    }
});
</script>
<p>上面的代码实现了一个基本的拖拽功能。当鼠标按下时，计算鼠标相对于可拖拽元素的偏移量，并在文档上添加'mousemove'和'mouseup'事件的监听器。当鼠标移动时，根据鼠标位置和偏移量设置元素的'left'和'top'位置。当鼠标释放时，从文档上移除监听器。</p>