当前位置：首页 > JavaScript

js实现图片拖拽

2026-02-28 23:04:16JavaScript

实现图片拖拽的基本步骤

使用HTML5的拖放API可以实现图片拖拽功能。需要监听拖拽相关事件，并处理数据传递。

HTML结构

<img id="drag-image" src="image.jpg" draggable="true">
<div id="drop-area"></div>

设置可拖拽元素

为图片添加draggable属性并监听拖拽开始事件：

js实现图片拖拽

const dragImage = document.getElementById('drag-image');

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

设置放置区域

为放置区域监听拖拽相关事件：

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
});

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

添加视觉反馈

可以添加CSS样式增强拖拽体验：

js实现图片拖拽

#drop-area {
    width: 300px;
    height: 300px;
    border: 2px dashed #ccc;
    padding: 10px;
}

#drop-area.drag-over {
    background-color: #f0f0f0;
    border-color: #666;
}

通过JavaScript动态添加类：

dropArea.addEventListener('dragenter', () => {
    dropArea.classList.add('drag-over');
});

dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('drag-over');
});

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <style>
        #drop-area {
            width: 300px;
            height: 300px;
            border: 2px dashed #ccc;
            padding: 10px;
        }
        #drop-area.drag-over {
            background-color: #f0f0f0;
            border-color: #666;
        }
        #drag-image {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img id="drag-image" src="image.jpg" draggable="true">
    <div id="drop-area"></div>

    <script>
        const dragImage = document.getElementById('drag-image');
        const dropArea = document.getElementById('drop-area');

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

        dropArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
        });

        dropArea.addEventListener('drop', (e) => {
            e.preventDefault();
            const id = e.dataTransfer.getData('text/plain');
            const draggedElement = document.getElementById(id);
            e.target.appendChild(draggedElement);
            dropArea.classList.remove('drag-over');
        });

        dropArea.addEventListener('dragenter', () => {
            dropArea.classList.add('drag-over');
        });

        dropArea.addEventListener('dragleave', () => {
            dropArea.classList.remove('drag-over');
        });
    </script>
</body>
</html>

注意事项

必须调用preventDefault()来阻止浏览器默认行为
dragover事件需要持续调用preventDefault()才能触发drop事件
移动端设备需要额外处理触摸事件
可以传输多种类型的数据，如图片URL或自定义数据

高级功能扩展

支持多个可拖拽元素：

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

添加拖拽克隆功能：

dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const original = document.getElementById(id);
    const clone = original.cloneNode(true);
    e.target.appendChild(clone);
});