[笔记]JavaScript 实现按钮拖拽效果

原文链接
魔改了下大佬的代码。
DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>拖动title>
    <style>
        h2 {
            font-size: 20px;
            color: #0d88c1;
        }

        div#left,
        div#right {
            width: 120px;
            float: left;
            margin: 10px 100px 10px 0px;
            height: 240px;
            background-color: #dddddd;
            overflow-y: auto;
        }

        div label {
            font-size: 22px;
            font-weight: bold;
            width: 100%;
            display: inline-block;
            padding: 4px 0;
            text-align: center;
            margin: 0px 0 2px 0;
            color: #fff;
            background-color: #0d88c1;
        }

        .over {
            border: 1px dashed red;
            box-sizing: border-box;
        }
    style>
head>

<body>
    <h2>拖放（Drag 和 drop）h2>
    
    <div id="left" class="drag-container1">
        <label draggable="true" class>index1label>
        <label draggable="true" class>index2label>
        <label draggable="true" class>index3label>
        <label draggable="true" class>index4label>
        <label draggable="true" class>index5label>
        <label draggable="true" class>index6label>
        <label draggable="true" class>index7label>
    div>
    
    <div id="right" class="drag-container1">div>
    <script>
        (async () => {
            let container1DragElement = null;
            const containerName = "drag-container1";
            // 获取元素 selector
            function getSelector(el) {
                var tag, index = 1, stack = [];
                for (; el.parentNode; el = el.parentNode) {
                    tag = el.tagName;
                    if (tag != "HTML") {
                        for (child of el.parentNode.children) {
                            if (child == el) {
                                break;
                            } else {
                                index++;
                            }
                        }
                        if (tag == "BODY") {
                            stack.unshift(tag);
                        } else {
                            stack.unshift(tag + ':nth-child(' + index + ')');
                        }
                    }
                }
                return stack.join(' > ');
            }
            /**
            * 判断是否是容器
            */
            function isContainer(ele) {
                return ele && ele.classList.contains(containerName);
            }
            function findContainer(ele) {
                var container = ele;
                while (true) {
                    if (container.tagName == "HTML") {
                        return isContainer(container);
                    }
                    if (container.classList.contains(containerName)) {
                        return container;
                    }
                    container = container.parentNode;
                }
                return container;
            }
            var moveItem = document.getElementsByTagName('label');
            for (let i = 0; i < moveItem.length; i++) {
                //动态设置label元素id
                moveItem[i].setAttribute('id', 'label' + i);
                moveItem[i].ondragstart = function (ev) {
                    //dataTransfer.setData() 方法设置被拖数据的数据类型和值
                    container1DragElement = this;
                    { {/*  ev.dataTransfer.setData("dragElementSelector", getSelector(this));  */ } }
                    ev.dataTransfer.setData("offsetX", getSelector(ev.offsetX));
                    ev.dataTransfer.setData("offsetY", getSelector(ev.offsetY));
                };
            }
            const containers = document.querySelectorAll(".drag-container1");
            containers.forEach(container => {
                // 阻止向上冒泡
                container.ondragover = ev => ev.preventDefault();
                container.ondragenter = ev => ev.target.classList.add('over');
                container.ondragleave = ev => ev.target.classList.remove('over');
                container.ondrop = function (ev) {
                    ev.preventDefault();
                    ev.target.classList.remove('over');
                    let container = null;
                    if (isContainer(ev.toElement)) {
                        //如果为container,元素放置在末尾
                        container = ev.toElement;
                        container.appendChild(container1DragElement);
                    } else {
                        container = findContainer(ev.toElement);
                        if (!container) {
                            console.warn("没有找到目标容器，无法执行拖拽操作");
                            return;
                        }
                        if (ev.toElement.nextElementSibling) {
                            console.log("ev.toElement.nextElementSibling", ev.toElement.nextElementSibling);
                            console.log("container1DragElement", container1DragElement);
                            if (ev.toElement.nextElementSibling == container1DragElement) {
                                // 如果是两个相邻的标签，则交换这两个标签
                                container.insertBefore(ev.toElement.nextElementSibling, ev.toElement);
                            } else {
                                container.insertBefore(container1DragElement, ev.toElement.nextElementSibling);
                            }
                        } else {
                            container.appendChild(container1DragElement);
                        }

                    }
                }
            });
        })();
    script>
body>

html>
···


### 参考资料
[JavaScript进阶之实现拖拽(上)](https://juejin.cn/post/6844904158273765384)
[https://www.nhooo.com/note/qadmbg.html](https://www.nhooo.com/note/qadmbg.html)
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
相关阅读:
基于多个openEuler物理机执行mugen测试脚本
 Linux学习第34天：Linux LCD 驱动实验（一）：星星之火可以燎原
 【字符串】重新格式化字符串
 线程篇（JAVA）
设计模式之观察者模式ObserverPattern（十一）
开启 Keep-Alive 可能会导致http 请求偶发失败
 DataGrip数据仓库工具
 全面讲解 Handler机制原理解析（小白必看）
32、Nio（selector（处理消息边界问题（三种方案）））
[xmake]构建静态库和动态库
原文地址：https://blog.csdn.net/qq_19922839/article/details/126729025