如何制作可拖拽div？如何利用event.dataTransfer传递数据？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文描述一个很有意思的小功能，就是如何利用各种dragstart、dragover、drop事件，打造一个可以拖动的页面元素。一个页面元素可以从一个容器拖动到另外一个容器内。

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：谷歌浏览器。

可以拖动的元素

哪个元素可以被拖动，就设置一个属性draggable="true"。

<p draggable="true" id="target">金子</p>

定义在可拖动元素上的ondragstart

ondragstart定义在可拖动元素上，但是对于dragstart事件，不能通过.preventDefault()阻碍默认行为。否则元素就不能拖动了。

<p draggable="true" id="target" ondragstart="dragStart(event)">金子</p>

function dragStart(e) {
    // e.preventDefault();
    e.dataTransfer.setData("Text", e.target.id);
    // document.getElementById("tip").innerText = "开始抢夺金子";
}

定义在容器上的ondragover和ondrop

被拖动的元素，最终要停放在哪里呢？这个时候就需要定义容器了。

<div class="container" ondragover="dragOver(event)" ondrop="drop(event)">
</div>

和ondragstart不一样的是：定义在容器上面的ondragover和ondrop，这两个事件不能通过.preventDefault()阻碍默认行为。

function dragOver(e) {
    e.preventDefault();
}
function drop(e) {
    e.preventDefault();
    var drag_id = e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(drag_id));
    // document.getElementById("tip").innerText = "金子已被拖动";
}

中间媒介e.dataTransfer

可见拖动开始dragstart的时候，通过e.dataTransfer来setData，记录被拖动的元素id。在拖动结束ondrop的时候，再通过e.dataTransfer来getData，拿到记录的元素id。在通过e.target.appendChild()来添加dom对象。

值得注意的是：这个被移动的dom，最终是在新的容器里面appendChild()来完成移动动作的。在原有容器里面并没有removeChild的动作。

完整代码

<style>
    .container {
        float: left; width: 120px; height: 50px;
        margin: 20px; padding: 10px;
        border: 1px solid #494949;
    }
    #target{
        width:36px; height:22px;
        background-color: gold;
    }
</style>
<div>
    <div class="container" ondragover="dragOver(event)" ondrop="drop(event)">
        <p ondragstart="dragStart(event)" draggable="true" id="target">金子</p>
    </div>
    <div class="container" ondragover="dragOver(event)" ondrop="drop(event)">
    </div>
</div>
<span id="tip"></span>
<script>
    function dragStart(e) {
        // e.preventDefault();
        e.dataTransfer.setData("Text", e.target.id);
        document.getElementById("tip").innerText = "开始抢夺金子";
    }
    function dragOver(e) {
        e.preventDefault();
    }
    function drop(e) {
        e.preventDefault();
        var drag_id = e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(drag_id));
        document.getElementById("tip").innerText = "金子已被拖动";
    }
</script>

本文的代码是基于原生js编写的，当然也可以基于jquery编写。基于jquery的时候，dataTransfer是存在于event.originalEvent.dataTransfer.里面的。参考文章：

• https://newsn.net/say/electron-drag-uri.html

结束语

这个效果非常不错，可以用于数据归类的建议操作。

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。