0%

使用原生 js 实现拖拽排序

1
2
3
4
5
6
7
8
<div class="container">
<p class="draggable" draggable="true">1</p>
<p class="draggable" draggable="true">2</p>
</div>
<div class="container">
<p class="draggable" draggable="true">3</p>
<p class="draggable" draggable="true">4</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body {
margin: 0;
}

.container {
background-color: #333;
padding: 1rem;
margin-top: 1rem;
}

.draggable {
padding: 1rem;
background-color: white;
border: 1px solid black;
cursor: move;
}

.draggable.dragging {
opacity: 0.5;
}
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
const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");

draggables.forEach((draggable) => {
draggable.addEventListener("dragstart", () => {
// console.log("start");
draggable.classList.add("dragging");
});

draggable.addEventListener("dragend", () => {
// console.log("end");
draggable.classList.remove("dragging");
});
});

containers.forEach((container) => {
// 在框框内的时候就是 drag over
container.addEventListener("dragover", (e) => {
// console.log("over");
e.preventDefault(); // 关闭禁止 cursor
const afterElement = getDragAfterElement(container, e.clientY);
// console.log(afterElement);
const draggable = document.querySelector(".dragging");
if (!afterElement) {
container.appendChild(draggable);
} else {
container.insertBefore(draggable, afterElement);
}
});
});

function getDragAfterElement(container, y) {
const draggableElements = [
...container.querySelectorAll(".draggable:not(.dragging)"),
];

return draggableElements.reduce(
(closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
// console.log(offset);
if (offset < 0 && offset > closest.offset) {
return {
offset,
element: child,
};
} else {
return closest;
}
},
{
offset: Number.NEGATIVE_INFINITY,
}
).element;
}

本文标题:使用原生 js 实现拖拽排序

文章作者:Flower-F

发布时间:2022年02月16日 - 09:31

最后更新:2022年02月16日 - 09:32

-------------本文结束,感谢您的阅读-------------

欢迎关注我的其它发布渠道