HTML5 draggable实现元素拖放

Posted on | 个浏览

draggable 属性是 HTML5 中的新属性，规定元素是否可拖动。

draggable=true 配合 ondrag & ondrop 事件可实现拖拽上传、拖拽删除、图片拖拽排序等等

在线demo

🌵 拖拽效果简单示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div>
    <div class="box"><span draggable="true">0</span></div>
    <div class="box"><span draggable="true">1</span></div>
    <div class="box"><span draggable="true">2</span></div>
    <div class="box"><span draggable="true">3</span></div>
    <div class="box"><span draggable="true">4</span></div>
    <div class="box"><span draggable="true">5</span></div>
    <div class="box"><span draggable="true">6</span></div>
    <div class="box"><span draggable="true">7</span></div>
    <div class="box"><span draggable="true">8</span></div>
</div>

<script type="text/javascript">
    var item = document.getElementsByTagName("span");
    var box = document.getElementById("box");
    var nowItem, nowItemBox, thenItem, s = 0;
    for (let i = 0; i < item.length; i++) {
        item[i].onmousedown = function () {
            nowItem = this;
            nowItemBox = this.parentNode;
        }
            
        box[i].ondragover = function (event) {
            event.preventDefault();
        }

        box[i].ondrop = function (event) {
            thenItem = box[i].childNodes[0];
            box[i].appendChild(nowItem);
            nowItemBox.appendChild(thenItem);

            if (item[i].outerText == i) {
                s += 1;
            }

            if (s >= item.length -2 && Number(item[item.length - 1].outerText) == item.length - 1) {
                setTimeout(function () {
                    alert("Success!");
                }, 200)
            }
        }
    }
</script>

📜 参考文章：