当前位置：首页 > JavaScript

js实现拖曳

2026-02-02 01:57:53JavaScript

实现拖曳的基本步骤

使用JavaScript实现拖曳功能需要处理三个主要事件：mousedown、mousemove和mouseup。以下是具体实现方法。

监听鼠标按下事件

在目标元素上监听mousedown事件，记录初始位置和鼠标位置。

js实现拖曳

const draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('mousedown', function(e) {
    // 记录初始位置
    const startX = e.clientX;
    const startY = e.clientY;

    // 记录元素初始位置
    const rect = draggableElement.getBoundingClientRect();
    const elementX = rect.left;
    const elementY = rect.top;

    // 计算鼠标相对于元素左上角的偏移
    const offsetX = startX - elementX;
    const offsetY = startY - elementY;

    // 存储数据以便在mousemove中使用
    const moveHandler = function(e) {
        // 计算新位置
        const newX = e.clientX - offsetX;
        const newY = e.clientY - offsetY;

        // 更新元素位置
        draggableElement.style.left = `${newX}px`;
        draggableElement.style.top = `${newY}px`;
    };

    // 监听鼠标移动事件
    document.addEventListener('mousemove', moveHandler);

    // 监听鼠标释放事件
    const upHandler = function() {
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
    };

    document.addEventListener('mouseup', upHandler);
});

设置元素样式

确保目标元素具有position属性（如absolute或relative），以便通过left和top属性移动。

js实现拖曳

#draggable {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #f00;
    cursor: move;
}

处理边界限制

在移动时限制元素不超出父容器边界。

const moveHandler = function(e) {
    const parentRect = draggableElement.parentElement.getBoundingClientRect();
    const elementWidth = draggableElement.offsetWidth;
    const elementHeight = draggableElement.offsetHeight;

    let newX = e.clientX - offsetX;
    let newY = e.clientY - offsetY;

    // 限制X轴边界
    newX = Math.max(parentRect.left, newX);
    newX = Math.min(parentRect.right - elementWidth, newX);

    // 限制Y轴边界
    newY = Math.max(parentRect.top, newY);
    newY = Math.min(parentRect.bottom - elementHeight, newY);

    draggableElement.style.left = `${newX - parentRect.left}px`;
    draggableElement.style.top = `${newY - parentRect.top}px`;
};

使用HTML5拖放API

HTML5提供了原生拖放API，适用于更复杂的场景。

<div id="draggable" draggable="true">拖曳我</div>
<div id="dropzone">放置区域</div>

const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');

draggable.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
});

dropzone.addEventListener('dragover', function(e) {
    e.preventDefault(); // 允许放置
});

dropzone.addEventListener('drop', function(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(id);
    e.target.appendChild(draggedElement);
});