当前位置：首页 > JavaScript

js实现图片拖拽

2026-01-16 13:11:31JavaScript

实现图片拖拽的基本步骤

HTML 结构需要包含可拖拽的图片元素，并设置 draggable 属性为 true：

<img id="dragImage" src="image.jpg" draggable="true">

添加拖拽事件监听

为图片元素添加 dragstart 事件监听器，用于设置拖拽数据：

js实现图片拖拽

const dragImage = document.getElementById('dragImage');
dragImage.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
});

设置放置目标区域

创建放置区域并添加 dragover 和 drop 事件监听器。dragover 需阻止默认行为以允许放置：

const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
});

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

完整代码示例

<!DOCTYPE html>
<html>
<head>
    <title>图片拖拽示例</title>
    <style>
        #dropZone {
            width: 300px;
            height: 300px;
            border: 2px dashed #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <img id="dragImage" src="image.jpg" draggable="true" width="100">
    <div id="dropZone">将图片拖放到此处</div>

    <script>
        const dragImage = document.getElementById('dragImage');
        const dropZone = document.getElementById('dropZone');

        dragImage.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', e.target.id);
        });

        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            const id = e.dataTransfer.getData('text/plain');
            const draggedElement = document.getElementById(id);
            e.target.appendChild(draggedElement);
        });
    </script>
</body>
</html>

高级功能扩展

拖拽过程中可以添加视觉反馈，例如修改放置区域的样式：

js实现图片拖拽

dropZone.addEventListener('dragenter', (e) => {
    e.target.style.border = '2px dashed #000';
});

dropZone.addEventListener('dragleave', (e) => {
    e.target.style.border = '2px dashed #ccc';
});

跨元素拖拽支持

若需支持多个拖拽元素，可通过类选择器批量绑定事件：

document.querySelectorAll('.draggable').forEach(item => {
    item.addEventListener('dragstart', (e) => {
        e.dataTransfer.setData('text/plain', e.target.id);
    });
});

移动而非复制元素

默认行为会复制元素，若需移动可在原位置移除元素：

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