js实现拖拽排序

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽排序</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {margin: 20px auto;width: 200px;list-style-type: none;}li {margin: 5px;text-align: center;width: 200px;height: 30px;background: skyblue;}.list .moving {background: transparent;color: transparent;border: 1px dashed #ccc;}</style></head><body>可拖动排序，改变数组，<div id="Application"><ul class="list" v-model="checkList"><li draggable="true" value="1">1</li><li draggable="true" value="2">2</li><li draggable="true" value="3">3</li><li draggable="true" value="4">4</li><li draggable="true" value="5">5</li></ul><ul>您的数据排序是：<h2 id="view"></h2></ul></div></body>
</html>
<script type="text/javascript">const forli = () => {var arr = document.getElementsByTagName('li');var	temp = [];for (var i = 0; i < arr.length; i++) {temp.push(arr[i].innerHTML)div = document.getElementById("view");div.innerHTML = JSON.stringify(temp);}}forli(); //先执行一遍let list = document.querySelector('.list')let currentLi // 记录拖拽元素list.addEventListener('dragstart', (e) => {e.dataTransfer.effectAllowed = 'move' // 拖动样式改为 "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>