JavaScript 实现简单元素拖拽功能

<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;
}

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();
}