js 拖拽案例

梦幻空花~

已于 2023-04-17 23:22:15 修改

阅读量77

点赞数

文章标签： javascript 前端 html

于 2023-04-17 22:40:37 首次发布

本文链接：https://blog.csdn.net/qq_38868959/article/details/130210470

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style type="text/css">
        div {
            float: left;
            width: 100px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        img {
            width: 88px;
            height: 31px;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("eleId", ev.target.id);
        }

        function drop(ev) {
            // ev.preventDefault();
            var curId = ev.dataTransfer.getData("eleId");
            ev.target.appendChild(document.getElementById(curId));
        }
    </script>
</head>

<body>

    <div ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag1">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag2">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag3">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag4">
    </div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

解析：
1.设置元素可拖放

< img draggable="true">

2.阻止元素默认事件，默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。event.preventDefault()

3.拖拽，可以传递拖拽元素的信息,这里把被拖拽的元素id传递过去,这样目标容器就可以通过id找到元素,然后appendChild进去。

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}

4.放置在目标元素区内，会触发ondrop方法。
这里两个有drop方法，因为这里两个box可以来回拖动，放置在哪个box中，就触发哪个drop的方法，所以这里的ev.target就是要放置的目标box，所以直接appendchild就可以。

function drop(ev) {
     // ev.preventDefault();单写这里不行，因为这个只设置了目标盒子可拖动,而被拖走的盒子没设置,所以直接在两个盒子上设置οndragοver="allowDrop(event)"
     var data = ev.dataTransfer.getData("Text");
     ev.target.appendChild(document.getElementById(data));
 }