列表拖拽排序是乙個很常見的功能,但是後端介面如何處理卻是乙個令人糾結的問題
如何實現才能達到效率最高呢?
先分析乙個場景,假如有乙個頁面有十條資料,所謂的拖拽就是在這十條資料來來回回的拖,但是每次拖動都會影響到其他資料例如把最後一條拖到最前面,那麼後面九條就自動往後移,反之也是,嗯~~~
先想象一下,排序號是固定的,就好像有十把椅子,每個椅子都是固定在那裡的,移動的是上面的人,這樣就不會影響到其他頁面的資料了而且每個人換的也是之前其他人的桌椅號碼,這樣也不用去想到底要加多少才能排在**。
介面設計:
view source
print?01
//i ds
這十條數
據的id
集合,逗
號隔開的
字串02
//
ids 這十條資料的id集合,逗號隔開的字串 02 //
ids這十條
資料的i
d集合,
逗號隔開
的字串
02//
oldindex 原始位置,從0開始算
03//new
inde
x要拖動
的位置04
func
tion
drag
sort
(newindex 要拖動的位置 04 function dragsort(
newind
ex要拖
動的位置
04fu
ncti
ondr
agso
rt(ids,old
inde
x,
oldindex,
oldind
ex,newindex)
0518
//記錄要拖動的id
19$oldvalue = ida
rr
[idarr[
idarr[
oldindex];
20//刪除這個要拖動的id
21unset(ida
rr
[idarr[
idarr[
oldindex]);
22//插入新的位置,並自動移位
23array_splice($idarr, $newindex, 0, $oldvalue);
24//重新設定排序25set
=[];
26for
(set = ; 26 for (
set=
;26f
or(i = 0; i
unt(
i < count(
iunt(
idarr); $i++)
30//儲存到資料庫省略31}
vue列表拖拽排序功能實現
1.實現目標 目標是輸入乙個陣列,生成乙個列表 通過拖拽排序,拖拽結束後輸出乙個經過排序的陣列。2.實現思路 2.1是使用html5的drag功能來實現,每次拖拽時直接操作dom節點排序,拖拽結束後再根據實際的dom節點遍歷得出新的陣列。2.2使用mousedown,mouseover等滑鼠事件來實...
在 Rails 中實現拖拽排序功能
首先,如果你使用了 webpack,那麼你可以在 package.json 中新增 jquery ui 1.12.1 如果沒有使用 webpack,那麼在 gemfile 檔案中新增 gem jquery ui rails import jquery ui ui widgets sortable 或...
UWP 拖拽列表項的排序功能實現
首先,我們需要讓冰箱的大門敞開,也就是允許我們進行拖拽的相關操作。以listview為例,注意下面幾個屬性。1 stackpanel 2 listview x name list 3allowdrop true 4canreorderitems true 5isswipeenabled true 6...