<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易拖拽</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
margin: 200px auto;
width: 400px;
list-style-type: none;
display: flex;
}
li {
margin: 5px;
text-align: center;
width: 400px;
height: 50px;
line-height: 50px;
border-radius: 6px;
background: skyblue;
}
.list .moving {
background: transparent;
color: transparent;
border: 1px dashed #ccc;
}
</style>
</head>
<body>
<ul class="list">
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
<li draggable="true">4</li>
<li draggable="true">5</li>
</ul>
<div style="display: flex;justify-content: center;">
<h1>您的数据排序是：</h1>
<h1 id="view"></h1>
</div>
<script>
const forli = () => {
var arr = document.getElementsByTagName('li'), temp = [];
console.log('arr', arr);
for (var i = 0; i < arr.length; i++) {
temp.push(arr[i].innerHTML)
div = document.getElementById("view");
div.innerHTML = JSON.stringify(temp);
//div.innerHTML = temp;
}
}
forli();//先执行一遍
let list = document.querySelector('.list')
let currentLi
list.addEventListener('dragstart', (e) => {
e.dataTransfer.effectAllowed = 'move'
currentLi = e.target
setTimeout(() => {
currentLi.classList.add('moving')
})
})
list.addEventListener('dragenter', (e) => {
e.preventDefault()
if (e.target === currentLi || e.target === list) {
return
}
let liArray = Array.from(list.childNodes)
let currentIndex = liArray.indexOf(currentLi)
let targetindex = liArray.indexOf(e.target)
if (currentIndex < targetindex) {
list.insertBefore(currentLi, e.target.nextElementSibling)
} else {
list.insertBefore(currentLi, e.target)
}
})
list.addEventListener('dragover', (e) => {
e.preventDefault()
forli()
})
list.addEventListener('dragend', (e) => {
currentLi.classList.remove('moving')
})
</script>
</body>
</html>
