首頁 >web前端 >js教程 >jQuery實作自由拖曳與排序元素的程式碼

jQuery實作自由拖曳與排序元素的程式碼

不言
不言原創
2018-07-17 17:49:291599瀏覽

透過元素的上下移動雖然能夠實現排序,但是不夠靈活,比較僵硬,不能夠快速達到我們想要排序的目的。下面我們來講解想如何實現快速的拖曳到自己想要的排序的位置。

首先我們要引入一款外掛程式gridly.js,用來實作元素拖曳。

  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery.gridly.js" type="text/javascript"></script>
  <link href="css/jquery.gridly.css" rel="stylesheet" type="text/css" />
<style>
  .gred {
    width: 90px;
    height: 100px;
    background: red;
    font-size:20px;
    text-align: center;
  }

  .ccc {
    width: 90px;
    height: 100px;
    background: #ccc;
    text-align: center;
    font-size:20px;
  }
  .gridly{
    position: relative;
    width: 800px;
    height: 200px;
    overflow: auto;
  }

</style>
<p class="gridly"></p>

 以下簡單的幾行js程式碼就能實現我們想要的功能:

 ( dom='' ( i = 0; i b3b20a38a8e8b1e4835a7696ab355ee7'+i+'94b3e26ee717c64999d7867364b1b4a3'+='08925a86548b2a1e02cb011316f09613'+i+'94b3e26ee717c64999d7867364b1b4a3''.gridly')[0]).append(dom);  
     reordering =  reordered =  arrdom=  array=[]; 
         $.each(arrdom,'.gridly'
      $('.gridly'100, 
        gutter: 20, 
        columns: 7

效果如下圖所示:

下面解釋一下:此外掛程式很簡單很方便使用,當我們發現設定顯示多少列和行距無效果時,不妨打開gridly.js源碼,找到下面的方法,進行設定即可。

相關推薦:

jQuery拖曳排序外掛程式製作拖曳排序效果(附原始碼下載)_jquery

#jquery拖曳排序簡單實作方法(效果增強版)_jquery

以上是jQuery實作自由拖曳與排序元素的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn