jQuery code to implement free dragging and sorting of elements-JS Tutorial-php.cn

jQuery code to implement free dragging and sorting of elements

不言

Release： 2018-07-17 17:49:29

Original

1614 people have browsed it

Although sorting can be achieved by moving elements up and down, it is not flexible enough and rigid, and cannot quickly achieve the purpose of sorting we want. Below we explain how to quickly drag and drop to the sorting position you want.

First of all, we need to introduce a plug-in gridly.js to implement element dragging.

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

Copy after login

The following simple lines of js code can achieve the functions we want:

 ( dom=&#39;&#39; ( i = 0; i <= 10; i++(i%2!=0+=&#39;<p class=" gred">&#39;+i+&#39;</p>&#39;+=&#39;<p class=" ccc">&#39;+i+&#39;</p>&#39;&#39;.gridly&#39;)[0]).append(dom);  
     reordering =  reordered =  arrdom=  array=[]; 
         $.each(arrdom,&#39;.gridly&#39;
      $(&#39;.gridly&#39;100, 
        gutter: 20, 
        columns: 7

Copy after login

The effect is as shown below:

Explanation below: This plug-in is very simple and easy to use. When we find that setting the number of columns to display and the line spacing has no effect, we might as well open the gridly.js source code, find the following method, and set it up.

Related recommendations:

jQuery drag sorting plug-in to create drag sorting effect (with source code download)_jquery

Jquery drag and drop sorting simple implementation method (enhanced version)_jquery

The above is the detailed content of jQuery code to implement free dragging and sorting of elements. For more information, please follow other related articles on the PHP Chinese website!