這篇文章主要介紹了jquery ui sortable如何實(shí)現(xiàn)拖拽后保存位置,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)專注于復(fù)興網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供復(fù)興營(yíng)銷型網(wǎng)站建設(shè),復(fù)興網(wǎng)站制作、復(fù)興網(wǎng)頁(yè)設(shè)計(jì)、復(fù)興網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù),打造復(fù)興網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供復(fù)興網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
jqueryUI sortable 可以用來(lái)進(jìn)行頁(yè)面拖拽布局,然而有一個(gè)小問(wèn)題就是拖拽后如何保存狀態(tài)。
工作中遇到了這個(gè)情況,遍把這個(gè)問(wèn)題記了下來(lái),具體思路是:
利用拖拽stop后利用
var arr = $( ".sortable" ).sortable('toArray');
記錄拖拽后的id數(shù)組順序,然后把這個(gè)數(shù)組存起來(lái),可以存cookie,數(shù)據(jù)庫(kù),localstorage等,刷新頁(yè)面后讀取這個(gè)數(shù)組,然后進(jìn)行重新排序。
具體的代碼如下可直接復(fù)制運(yùn)行。本文將數(shù)組保存在localstorage里面。
jQuery UI 拖動(dòng)(Draggable) - 約束運(yùn)動(dòng)
放在這里只有鼠標(biāo)放在小長(zhǎng)方形里才能移動(dòng) 放在這里 放在這里 放在這里 放在這里 放在這里
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“jquery ui sortable如何實(shí)現(xiàn)拖拽后保存位置”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!