直接复制代码就可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 300px;
margin: auto;
margin-top: 200px;
}
.box .item {
width: 400px;
height: 60px;
border-radius: 5px;
background: plum;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
cursor: pointer;
}
.item.moving {
background: transparent;
color: transparent;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="item" draggable="true">1</div>
<div class="item" draggable="true">2</div>
<div class="item" draggable="true">3</div>
<div class="item" draggable="true">4</div>
<div class="item" draggable="true">5</div>
</div>
</body>
<script>
const list = document.querySelector('.box');
let sourceNode;
// 拖拽开始
list.ondragstart = e => {
setTimeout(() => {
e.target.classList.add('moving');
}, 0);
sourceNode = e.target;
}
// 因为拖拽API都是不允许拖拽的元素拖拽到其他地方 都会回到原来的地方 我们阻止原来的方法就行
// 拖拽完成
list.ondragover = e => {
e.preventDefault();
}
// 拖拽进入
list.ondragenter = e => {
e.preventDefault();
if(e.target === list || e.target === sourceNode) {
return
}
const sourceIndex = [...list.children].indexOf(sourceNode); // 拖拽元素的下标
const targetIndex = [...list.children].indexOf(e.target); // 进入元素的下标
// 向下拖动
if(sourceIndex < targetIndex) {
list.insertBefore(sourceNode, e.target.nextElementSibling);
}else {
list.insertBefore(sourceNode, e.target);
}
}
// 拖拽结束
list.ondragend = e => {
e.target.classList.remove('moving');
}
</script>
</html>