vue列表拖拽排序功能實現

1.實現目標：目標是輸入乙個陣列，生成乙個列表；通過拖拽排序，拖拽結束後輸出乙個經過排序的陣列。

2.實現思路：

2.1是使用html5的drag功能來實現，每次拖拽時直接操作dom節點排序，拖拽結束後再根據實際的dom節點遍歷得出新的陣列。

2.2使用mousedown,mouseover等滑鼠事件來實現，每次監聽事件時，僅改動列表項的樣式transform，而不操作實際的dom順序。拖拽結束時，根據transform計算陣列項順序，得出新陣列用vue資料驅動的方式重繪列表，重置所有樣式。

總的來說就是可以通過不同的監聽事件（drag、mouseover），按不同的順序操作dom（1.先操作實際dom，再新增動畫，在輸出陣列；2。不操作實際dom，僅改變transfrom，得出新陣列，用新陣列生成新列表來更新節點）。

3.實際**

3.1第一種實現

html部分。（被拖拽的元素需要設定draggable=true,否則不會有效果）

@dragstart="ondragstart"

@dragover="ondragover"

@dragend="ondragend"

ref="parentnode">}

拖拽事件有兩個物件（被拖拽物件和目標物件）。dragstart 事件: 當拖拽元素開始被拖拽的時候觸發的事件，此事件作用在被拖拽元素上。dragover事件：當拖拽元素穿過目標元素時候觸發的事件，此事件作用在目標元素上。

在拖拽事件開始時，將本次拖拽的物件儲存到變數中。每當dragover事件，將目標物件儲存到變數中，新增判斷當目標物件和拖拽物件為不同的列表項時，交換兩個dom元素的先後順序。

ondragstart(event),    
ondragover(event));
console.log(data)
}，_index(el)

現在基本效果有了，然後是新增動畫。新增動畫的方式是通過transform實現。

因為每次拖拽排序觸發時都會改變dom結構，為了實現移動的效果，可以在每次排序時先將dom節點恢復通過transform到原來的位置，使得表現上還是排序前的狀態。然後新增transition，同時置空transform實現移動效果。（這裡需要重繪才能觸發效果，否則兩次transform會直接抵消掉，可以使用settimeout或者ele.offsetwidth來觸發重繪），transform的偏移量可以通過改變節點順序前後的距頂高度來獲得。

完整**：


@dragstart="ondragstart" 
@dragover="ondragover"
@dragend="ondragend"
ref="parentnode">}
data: ,
mounted () 
},methods:,
ondragover(event)
}if(this._index(this.draging)dom.style.transition="transform .3s";
dom.style.transform=``;
//觸發重繪
// settimeout(()=>,0)

cleartimeout(dom.animated);
dom.animated=settimeout(()=>,300)
},ondragend(event));
console.log(data)
},_index(el)}})

3.2.第二種實現

mousedown的時候記錄下拖拽項和拖拽項初始位置，mouseover的時候將拖拽項和目標項交換位置，新增transform，mouseup的時候遍歷出新陣列來更新檢視。這種方式就是動畫不好加，個人瞎琢磨的，應該是思路錯誤了，放著看看吧。


ref="parentnode"
@mouseover="onmouseover"
@mouseup="onmouseup">"
>}
data: ,
mounted () 
document.onmouseup=()=>;
},computed:,
itemheight()
},methods:,
onmouseover(event)
drag.style.transform=`translatey($px)`;
target.style.transform=`translatey($px)`;}}
},onmouseup()}})

vue列表拖拽排序功能實現

UWP 拖拽列表項的排序功能實現

php介面實現拖拽排序功能

在 Rails 中實現拖拽排序功能

vue列表拖拽排序功能實現

UWP 拖拽列表項的排序功能實現

php介面實現拖拽排序功能

在 Rails 中實現拖拽排序功能

相關推薦