網(wǎng)站建設(shè)作者墻這個模板培訓(xùn)學(xué)校網(wǎng)站
拖拽（這兩個字看了幾遍已經(jīng)不認識了）
說到拖拽，應(yīng)用場景不可謂不多。無論是打開電腦還是手機，第一眼望去的界面都是可拖拽的，靠拖拽實現(xiàn)APP或者應(yīng)用的重新布局，或者拖拽文件進行操作文件。
先看效果圖，如何實現(xiàn)一個如圖HTML元素的拖拽，并排序
HTML中的拖拽事件（drag & drop）
參考MDN中文文檔
事件類型
- drag ： 當(dāng)拖拽的元素或者選中的文本時觸發(fā)* dragend ： 當(dāng)拖拽元素結(jié)束時觸發(fā)* dragenter ： 當(dāng)拖拽元素或選中的文本到一個可釋放目標時觸發(fā)* dragleave ： 當(dāng)拖拽元素或選中的文本離開一個可釋放目標時觸發(fā)* dragover ： 當(dāng)元素或選中的文本被拖到一個可釋放目標上時觸發(fā)（每 100 毫秒觸發(fā)一次）* dragstart ： 當(dāng)用戶開始拖拽一個元素或選中的文本時觸發(fā)* drop ： 當(dāng)元素或選中的文本在可釋放目標上被釋放時觸發(fā)Coding
寫一段簡單的CSS和html ，實現(xiàn)初始的頁面
css*{margin: 0;padding: 0;box-sizing: border-box;}ul{margin: 200px 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;}
html<ul class="list"><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li></ul>
此時我們的頁面如下圖
現(xiàn)在還不可以進行拖拽操作，為了可以實現(xiàn)拖拽操作，我們必須給每個元素設(shè)置 draggable=“true”
<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>
元素已經(jīng)可以基礎(chǔ)的拖拽
接下來我們需要在JS中對DOM元素進行一系列操作來實現(xiàn)對應(yīng)的效果
1.實現(xiàn)拖出去的元素，原位置樣式變?yōu)橥该魈摼€
2.實現(xiàn)拖動到其他元素上時，列表順序發(fā)生改變
let list = document.querySelector('.list')let currentLi// 記錄拖拽元素
我們用事件委托，監(jiān)聽 “dragstart” 事件，給拖動的元素添加類名，修改樣式，這里會出現(xiàn)奇怪的一幕就是，拖動的樣式和原來的樣式同時變成了透明。
list.addEventListener('dragstart',(e)=>{e.dataTransfer.effectAllowed = 'move' // 拖動樣式改為 "move"currentLi = e.targetcurrentLi.classList.add('moving')})
這里會出現(xiàn)奇怪的一幕就是，拖動的樣式和原來的樣式同時變成了透明。這是因為跟隨鼠標拖動的元素的樣式在拖動的那一刻是原始元素的樣式，所以也會添加"moving"， 那么在這里我們加一個異步
list.addEventListener('dragstart',(e)=>{e.dataTransfer.effectAllowed = 'move'currentLi = e.targetsetTimeout(()=>{currentLi.classList.add('moving')})})
到這里距離目標又更近了一步，
接下來我們需要在拖動的過程中對列表的元素進行重新的排序
Node.insertBefore()：方法在參考節(jié)點之前插入一個擁有指定父節(jié)點的子節(jié)點
list.addEventListener('dragenter',(e)=>{e.preventDefault()// 阻止默認事件if(e.target === currentLi||e.target === list){ // 當(dāng)移動到當(dāng)前拖動元素，或者父元素上面我們不做操作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)}})
最后我們需要在拖拽結(jié)束將元素的moving類名移除,以及阻止拖拽到一個目標上的默認事件（否則會出現(xiàn)禁止）
list.addEventListener('dragover',(e)=>{e.preventDefault()})list.addEventListener('dragend',(e)=>{currentLi.classList.remove('moving')})
至此，一個簡單的拖拽排序功能就實現(xiàn)了
完整代碼
<!DOCTYPE html>
<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>Document</title><style> *{margin: 0;padding: 0;box-sizing: border-box;}ul{margin: 200px 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><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><script> let list = document.querySelector('.list')let currentLilist.addEventListener('dragstart',(e)=>{e.dataTransfer.effectAllowed = 'move'currentLi = e.targetsetTimeout(()=>{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()})list.addEventListener('dragend',(e)=>{currentLi.classList.remove('moving')}) </script>
</body>
</html>
最后
最近還整理一份JavaScript與ES的筆記，一共25個重要的知識點，對每個知識點都進行了講解和分析。能幫你快速掌握JavaScript與ES的相關(guān)知識，提升工作效率。
有需要的小伙伴，可以點擊下方卡片領(lǐng)取，無償分享