HTML 拖拽排序
2023-10-07 本文已影响0人
我没叫阿
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
width: 100%;
height: 100vh;
}
p {
width: 400px;
padding: 20px;
background: lightgreen;
border-radius: 5px;
margin: 20px;
text-align: left;
line-height: 20px;
}
p.draggable {
border: 1px dashed #ccc;
opacity: .5;
}
</style>
</head>
<body>
<div id="box">
<p draggable="true">1</p>
<p draggable="true">2</p>
<p draggable="true">3</p>
<p draggable="true">4</p>
<p draggable="true">5</p>
</div>
</body>
<script>
const box = document.getElementById('box')
let sourceNode;
box.ondragstart = (e) => {
setTimeout(() => {
e.target.classList.add('draggable')
}, 0);
e.dataTransfer.effectAllowed = 'move';
sourceNode = e.target
}
box.ondragover = (e) => {
e.preventDefault()
}
box.ondragenter = (e) => {
e.preventDefault()
if (e.target === box || e.target === sourceNode) { return }
const sourceIndex = [...box.children].indexOf(sourceNode)
const targetIndex = [...box.children].indexOf(e.target)
if (sourceIndex < targetIndex) {
// console.log('向下');
box.insertBefore(sourceNode, e.target.nextElementSibling)
} else {
// console.log('向上');
box.insertBefore(sourceNode, e.target)
}
console.log(e.target);
}
box.ondragend = (e) => {
e.target.classList.remove('draggable')
}
</script>
</html>
