jqueryuisortable如何實現(xiàn)拖拽后保存位置

這篇文章主要介紹了jquery ui sortable如何實現(xiàn)拖拽后保存位置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于復(fù)興網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供復(fù)興營銷型網(wǎng)站建設(shè)，復(fù)興網(wǎng)站制作、復(fù)興網(wǎng)頁設(shè)計、復(fù)興網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造復(fù)興網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供復(fù)興網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

jqueryUI sortable 可以用來進(jìn)行頁面拖拽布局，然而有一個小問題就是拖拽后如何保存狀態(tài)。

工作中遇到了這個情況，遍把這個問題記了下來，具體思路是：

利用拖拽stop后利用

 var arr = $( ".sortable" ).sortable('toArray');

記錄拖拽后的id數(shù)組順序，然后把這個數(shù)組存起來，可以存cookie,數(shù)據(jù)庫，localstorage等，刷新頁面后讀取這個數(shù)組，然后進(jìn)行重新排序。

具體的代碼如下可直接復(fù)制運行。本文將數(shù)組保存在localstorage里面。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery UI 拖動（Draggable） - 約束運動</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" 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" href="http://jqueryui.com/resources/demos/style.css" 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記錄則，按照這個進(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)放在小長方形里才能移動
        </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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jquery ui sortable如何實現(xiàn)拖拽后保存位置”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

當(dāng)前文章：jqueryuisortable如何實現(xiàn)拖拽后保存位置
本文來源：http://bm7419.com/article22/gossjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司