JS实现简单的拖拽效果

编程三昧2023-09-02 0:05

拖拽是前端实现中比较常用的一种效果， HTML5 提供了较为强大的拖拽 API 支持，今天我们来实现一个简单的拖拽效果。

实现

html 复制代码

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

稍微添加点样式：

css 复制代码

div {
    margin: 0em;
    padding: 2em;
}

#source {
    color: #009688;
    border: 1px solid #009688;
}

#target {
    border: 1px solid black;
}

JS脚本如下：

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

总结

今天这只是个简单的示例，后续我们可以在此基础上实现更多的效果。