源码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
#root {
position: relative;
500px;
margin: 100px auto;
border: 1px solid red;
}
.item {
100%;
position: absolute;
left: 0;
background-color: rgba(15, 128, 255, 0.4);
border-bottom: 1px solid blue;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
// 参数
const data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
const height = 50;
// 初始化变量
let children = []
let target = null;
let moveTop = 0;
let targetNum = 0;
// 渲染元素
const root = document.querySelector('#root')
root.style.height = data.length * height + 'px';
for (let i = 0, len = data.length; i < len; i++) {
const item = data[i]
const div = document.createElement('div')
div.className = 'item'
div.innerText = item
div.style.top = i * height + 'px'
div.style.height = height + 'px'
drag(div)
children.push(div)
root.appendChild(div)
}
// 拖拽
function drag(div) {
div.onmousedown = function(e) {
const top = e.clientY - div.offsetTop;
target = div;
targetNum = Math.round(div.offsetTop / height)
document.onmousemove = function(e) {
moveTop = e.clientY - top;
target.style.top = moveTop + 'px'
move()
}
}
}
// 鼠标松开设置最终落下位置
document.onmouseup = function() {
document.onmousemove = null;
if (!target) return null;
const nowNum = Math.round(moveTop / height)
if (nowNum >= (children.length - 1)) {
target.style.top = (children.length - 1) * height + 'px';
} else if (nowNum <= 0) {
target.style.top = '0px';
} else {
target.style.top = nowNum * height + 'px';
}
}
// 交换位置
function move() {
const nowNum = Math.round(moveTop / height)
for (let i = 0, len = children.length; i < len; i++) {
const item = children[i];
if (target === item) {
continue;
}
const itemNum = parseInt(item.style.top) / height;
if (itemNum === nowNum) {
if (itemNum < targetNum) {
item.style.top = (parseInt(item.style.top) + height) + 'px';
} else if (itemNum > targetNum) {
item.style.top = (parseInt(item.style.top) - height) + 'px';
}
targetNum = Math.round(moveTop / height);
return null;
}
}
}
</script>
</body>
</html>