JavaScript 实现简单元素拖拽功能

作者：青柠

时间：2026-10-30

本文介绍了如何使用 JavaScript 实现简单的元素拖拽功能。通过 HTML5 的 Drag and Drop API，结合 ondragstart、ondragover 和 ondrop 事件，可以完成元素的移动与放置。文中提供了完整的 HTML 结构、CSS 样式及 JS 代码示例，帮助开发者快速掌握拖拽效果的基本实现原理。

文章目录

完成

<div>
    <div id="source" ondragstart="dragstart_handler(event);" draggable="true">
        把我拖拽到下方啊！
    </div>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">目标区域</div>

增加部分外观设定：

div {
    margin: 0em;
    padding: 2em;
}
#source {
    color: #009688;
    border: 1px solid #009688;
}
#target {
    border: 1px solid black;
}

JavaScript代码示例：

function dragstart_handler(event) {
    console.log("dragStart");
    // 设置拖动的格式和数据::使用事件目标的 id 作为数据
    event.dataTransfer.setData("text/plain", event.target.id);
}
function dragover_handler(event) {
    console.log("dragOver");
    event.preventDefault();
}
function drop_handler(event) {
    console.log("Drop");
    event.preventDefault();
    // 获取拖放目标的 id 数据
    var data = event.dataTransfer.getData("text");
    event.target.appendChild(document.getElementById(data));
    event.dataTransfer.clearData();
}