当前位置：首页 > HTML

h5实现拖拽

2026-03-06 08:46:56HTML

实现拖拽的基本步骤

在HTML5中，拖拽功能可以通过拖拽事件和draggable属性实现。以下是一个简单的实现方式：

<div id="dragElement" draggable="true">拖拽我</div>
<div id="dropArea">放置区域</div>

const dragElement = document.getElementById('dragElement');
const dropArea = document.getElementById('dropArea');

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

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

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

拖拽事件详解

拖拽功能涉及多个事件，以下是常见的事件及其用途：

dragstart：当用户开始拖拽元素时触发。
drag：在拖拽过程中持续触发。
dragend：拖拽结束时触发。
dragover：当拖拽元素在放置区域上方时触发，需阻止默认行为以允许放置。
dragenter：拖拽元素进入放置区域时触发。
dragleave：拖拽元素离开放置区域时触发。
drop：拖拽元素被放置到目标区域时触发。

拖拽数据的传递

通过dataTransfer对象可以在拖拽过程中传递数据：

dragElement.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', '自定义数据');
    e.dataTransfer.effectAllowed = 'copy'; // 允许的操作类型：copy, move, link等
});

拖拽效果的样式控制

可以通过CSS为拖拽元素和放置区域添加视觉反馈：

#dragElement {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px;
}

#dropArea {
    width: 200px;
    height: 200px;
    border: 2px dashed #ccc;
    margin-top: 20px;
}

#dropArea.highlight {
    border-color: blue;
    background-color: #f0f8ff;
}

通过JavaScript动态添加样式：

dropArea.addEventListener('dragenter', () => {
    dropArea.classList.add('highlight');
});

dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('highlight');
});

跨元素拖拽的完整示例

以下是一个完整的跨元素拖拽示例：

<div class="container">
    <div class="item" draggable="true" id="item1">Item 1</div>
    <div class="item" draggable="true" id="item2">Item 2</div>
</div>
<div class="target" id="target">Drop here</div>

.container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.item {
    padding: 10px;
    background-color: lightgreen;
    cursor: move;
}

.target {
    width: 300px;
    height: 100px;
    border: 2px dashed #666;
    text-align: center;
    line-height: 100px;
}

.target.highlight {
    background-color: #e6f7ff;
}

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

const target = document.getElementById('target');
target.addEventListener('dragover', (e) => e.preventDefault());
target.addEventListener('dragenter', () => target.classList.add('highlight'));
target.addEventListener('dragleave', () => target.classList.remove('highlight'));
target.addEventListener('drop', (e) => {
    e.preventDefault();
    target.classList.remove('highlight');
    const id = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(id);
    target.appendChild(draggedItem);
});