實現h5頁面的拖拽排序功能，核心在于掌握html5的拖放api及JavaScript交互控制。1. 準備好設置draggable=”true”的html結構，如使用
實現H5頁面的拖拽排序功能，核心在于理解html5的拖放API（Drag and Drop API）以及如何結合JavaScript進行交互控制。雖然看起來有點復雜，但只要掌握幾個關鍵點，就能輕松實現一個流暢的拖拽排序效果。
1. HTML結構：準備好可拖拽的元素
要實現拖拽排序，首先需要一組可以移動的元素。通常使用
或
來表示每一個可拖動項。每個元素都需要設置 draggable=”true” 屬性，告訴瀏覽器它是可以被拖動的。
<ul id="sortable-list"> <li draggable="true">項目1</li> <li draggable="true">項目2</li> <li draggable="true">項目3</li> </ul>
這樣就準備好了基本結構，接下來就是讓這些元素“活”起來。
2. 監聽拖拽事件：捕獲拖放過程中的狀態變化
HTML5提供了多個與拖放相關的事件，常用的包括：
- dragstart：開始拖拽時觸發
- dragover：拖拽過程中經過某個元素時持續觸發
- drop：釋放鼠標完成放置時觸發
- dragend：拖拽結束（無論是否成功）
我們需要為每個可拖拽元素和容器分別綁定這些事件。
const list = document.getElementById('sortable-list'); const items = list.querySelectorAll('li'); items.forEach(item => { item.addEventListener('dragstart', handleDragStart); item.addEventListener('dragover', handleDragOver); item.addEventListener('drop', handleDrop); item.addEventListener('dragend', handleDragEnd); });
注意：dragover默認不會允許放置，必須在該事件中調用 event.preventDefault() 才能允許元素被放到目標區域。
3. 實現拖拽邏輯：動態調整順序
這部分是整個功能的核心。我們通過記錄正在拖拽的元素，并在dragover時判斷它應該插入的位置，最后在drop時真正改變DOM結構。
關鍵變量
let draggedItem = null;
拖拽開始時記錄當前元素
function handleDragStart() { draggedItem = this; setTimeout(() => { this.style.opacity = '0.5'; }, 0); }
拖拽經過其他元素時判斷插入位置
function handleDragOver(e) { e.preventDefault(); if (this !== draggedItem && this.parentNode === draggedItem.parentNode) { const referenceNode = (e.offsetY || e.layerY) > this.offsetHeight / 2 ? 'afterend' : 'beforebegin'; this.parentNode.insertBefore(draggedItem, this.nextSibling || this); } }
這里的關鍵是判斷鼠標是在目標元素的上半部分還是下半部分，從而決定插入位置。
拖拽結束后清理樣式
function handleDragEnd() { this.style.opacity = '1'; draggedItem = null; }
4. 優化體驗：添加視覺反饋和兼容性處理
為了讓用戶操作更直觀，可以考慮以下幾點優化：
- 給被拖拽的元素加上半透明效果（上面已經做了）
- 在dragover時給目標元素加個邊框或背景色提示
- 移動端支持可能需要額外處理，比如使用第三方庫（如Sortable.JS）來增強兼容性
例如添加高亮：
.drag-over { background-color: #f0f0f0; border: 2px dashed #999; }
然后在dragover時添加類名：
this.classList.add('drag-over');
并在drop或dragend時移除：
function handleDrop() { // ... this.classList.remove('drag-over'); }
基本上就這些步驟了。雖然實現過程涉及多個事件監聽和DOM操作，但只要一步步拆解，其實并不難。關鍵是理清拖拽流程，確保每個階段的狀態都能正確反映到ui上。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
