php介面實現拖拽排序功能

2021-09-08 07:25:50 字數 1380 閱讀 4441

列表拖拽排序是乙個很常見的功能,但是後端介面如何處理卻是乙個令人糾結的問題

如何實現才能達到效率最高呢?

先分析乙個場景,假如有乙個頁面有十條資料,所謂的拖拽就是在這十條資料來來回回的拖,但是每次拖動都會影響到其他資料例如把最後一條拖到最前面,那麼後面九條就自動往後移,反之也是,嗯~~~

先想象一下,排序號是固定的,就好像有十把椅子,每個椅子都是固定在那裡的,移動的是上面的人,這樣就不會影響到其他頁面的資料了而且每個人換的也是之前其他人的桌椅號碼,這樣也不用去想到底要加多少才能排在**。

介面設計:

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...