话不多说，直接上代码
<!DOCTYPE html>
<html>
<body>
<!-- 可拖动的list -->
<ul id="drag" class="drag">
<li draggable="true" class="item">#Item 1</li>
<li draggable="true" class="item">#Item 2</li>
<li draggable="true" class="item">#Item 3</li>
<li draggable="true" class="item">#Item 4</li>
<li draggable="true" class="item">#Item 5</li>
</ul>
<div>
其他
</div>
<ul id="drag" class="drag">
<li draggable="true" class="item">#Item 1</li>
<li draggable="true" class="item">#Item 2</li>
<li draggable="true" class="item">#Item 3</li>
<li draggable="true" class="item">#Item 4</li>
<li draggable="true" class="item">#Item 5</li>
</ul>
</body>
<script>
// 当前拖拽元素
let draggingElement;
const lis = document.querySelectorAll(".drag li");
for (let i = 0; i < lis.length; i++) {
// 开始拖拽
lis[i].addEventListener("dragstart", (event) => {
draggingElement = event.target;
// 隐藏
draggingElement.style.opacity = 0
});
// 开始拖拽
lis[i].addEventListener("dragend", (event) => {
event.target;
console.log("🚀 ~拖拽完成", event.target)
draggingElement.style.opacity = "unset"
});
// 目标元素获取
lis[i].addEventListener("dragenter", (event) => {
let toElement = event.target
const order = Array.from(toElement.parentElement.children).indexOf(toElement);
const draggingElementOrder = Array.from(draggingElement.parentElement.children).indexOf(draggingElement);
toElement.parentElement.insertBefore(draggingElement, toElement?.nextElementSibling);
// //从大的序号移入到小的序号
if (draggingElementOrder == order) {
} else if (draggingElementOrder > order) {
toElement.parentElement.insertBefore(draggingElement, toElement);
} else {
toElement.parentElement.insertBefore(draggingElement, toElement?.nextElementSibling);
}
});
}
</script>
<style>
.item {
background-color: #a5d5c9;
width: 280px;
list-style: none;
border-style: solid;
border-color: #a5c3d5;
transition: all 1s;
}
</style>
</html>
