我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:如何制作可拖拽div?如何利用event.dataTransfer传递数据? - e-datatransfer-div-dragable
如何制作可拖拽div?如何利用event.dataTransfer传递数据?(图4-1)

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

可以拖动的元素

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

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

苏南大叔:如何制作可拖拽div?如何利用event.dataTransfer传递数据? - html和css
如何制作可拖拽div?如何利用event.dataTransfer传递数据?(图4-2)

定义在可拖动元素上的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 = "开始抢夺金子";
}

定义在容器上的ondragoverondrop

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

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

ondragstart不一样的是:定义在容器上面的ondragoverondrop,这两个事件不能通过.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 = "金子已被拖动";
}

苏南大叔:如何制作可拖拽div?如何利用event.dataTransfer传递数据? - js逻辑
如何制作可拖拽div?如何利用event.dataTransfer传递数据?(图4-3)

中间媒介e.dataTransfer

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

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

完整代码

苏南大叔:如何制作可拖拽div?如何利用event.dataTransfer传递数据? - 操作截图
如何制作可拖拽div?如何利用event.dataTransfer传递数据?(图4-4)

<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.里面的。参考文章:

结束语

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js