jQuery code to implement free dragging and sorting of elements

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>

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

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!