jquery ui sortable拖拽后保存位置
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里面。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 拖動(dòng)(Draggable) - 約束運(yùn)動(dòng)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" rel="external nofollow" > <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- <link rel="stylesheet" rel="external nofollow" > --> <style> *{ margin:0; padding: 0; box-sizing: border-box; } .container{ border: 1px solid black; margin-bottom: 10px; margin-top: 10px; } .container:after{ content: ""; display: block; clear: both; } .drag{ width: 200px; height: 200px; float: left; } ul li { list-style: none; } .innerdiv{ padding: 10px; height: 100%; } .innerdiv2{ background: grey; height: 100%; } #draggable1{ width: 400px; height: 400px; } .move{ width: 80px; height: 40px; background: blanchedalmond; } </style> <script> $(function() { var arr = ''; var sort = $( ".sortable" ).sortable({ handle: ".move", opacity: 0.7, delay: 150, cursor:'move', revert: true, stop:function(){ //記錄sort后的id順序數(shù)組 var arr = $( ".sortable" ).sortable('toArray'); console.log(arr); //拖拽后利用localStorage記錄順序 localStorage.arr = arr; } }); var localSt = localStorage.arr; //如果有l(wèi)ocalst記錄則,按照這個(gè)進(jìn)行排序元素 if(localSt){ var resArr = localSt.split(','); var resUl = $('ul'); //li 數(shù)組 for(var i = 0;i < resArr.length;i++){ resUl.append($("#" + resArr[i])); } } }); </script> </head> <body> <div class="container"> <ul class="sortable"> <li id="draggable2" class="drag"> <div class="innerdiv"> <div class="innerdiv2"> <div class="move">放在這里</div> 只有鼠標(biāo)放在小長(zhǎng)方形里才能移動(dòng) </div> </div> </li> <li id="draggable3" class="drag"> <div class="innerdiv"> <div class="innerdiv2"> <div class="move">放在這里</div> </div> </div> </li> <li id="draggable4" class="drag"> <div class="innerdiv"> <div class="innerdiv2"> <div class="move">放在這里</div> </div> </div> </li> <li id="draggable5" class="drag"> <div class="innerdiv"> <div class="innerdiv2"> <div class="move">放在這里</div> </div> </div> </li> <li id="draggable6" class="drag"> <div class="innerdiv"> <div class="innerdiv2"> <div class="move">放在這里</div> </div> </div> <li id="draggable1" class="drag"> <div class="innerdiv"> <div class="innerdiv2"> <div class="move">放在這里</div> </div> </div> </li> </li> </ul> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例
- jquery sortable的拖動(dòng)方法示例詳解
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- jquery控制listbox中項(xiàng)的移動(dòng)并排序
- jquery對(duì)元素拖動(dòng)排序示例
- 基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
- jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序
- jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
- Jquery實(shí)現(xiàn)上下移動(dòng)和排序代碼
- jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序
相關(guān)文章
jQuery中調(diào)用WebService方法小結(jié)
以前在寫ajax請(qǐng)求時(shí),總是喜歡使用jQuery+ashx的方式進(jìn)行調(diào)用,今天采取jQuery+WebService的方法來(lái)做ajax請(qǐng)求,發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。2011-03-03js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例
這篇文章主要介紹了js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10jQuery動(dòng)態(tài)添加 input type=file的實(shí)現(xiàn)代碼
有時(shí)候需要在頁(yè)面上允許用戶上傳多個(gè)文件,個(gè)數(shù)由用戶自己決定,個(gè)數(shù)多了也可以刪除,使用jQuery可以很簡(jiǎn)單的實(shí)現(xiàn)這個(gè)功能2012-06-06jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法
本文章介紹了,jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法,需要的朋友可以參考一下2013-03-03基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示,能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08JQuery模板插件 jquery.tmpl 動(dòng)態(tài)ajax擴(kuò)展
在上一篇JQuery模板插件-jquery.tmpl中介紹了這款插件。有時(shí)我們需要去動(dòng)態(tài)的ajax去加載模板,或者數(shù)據(jù),根據(jù)url參數(shù)或者其他信息加載不同的模板,數(shù)據(jù)2011-11-11