Drag elements freely for free sorting

Keywords: Javascript JQuery

Last issue we used jquery to sort by moving elements up and down, but we found that moving up and down, while sorting is possible, is not flexible, rigid, and fast enough to achieve the purpose we want to sort.Let's show you how to quickly drag to the sort position you want.

First, we'll introduce a plug-in, gridly.js, for 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" />
  .gred {
    width: 90px;
    height: 100px;
    background: red;
    text-align: center;

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

<div class="gridly"></div>

The following simple lines of js code do what we want:

      var dom='';
      for (var i = 0; i <= 10; i++) {
           dom+='<div class=" gred">'+i+'</div>';
           dom+='<div class=" ccc">'+i+'</div>';
   $($('.gridly')[0]).append(dom);  //Add Sort Element
    var reordering = function($elements) {

    var reordered = function($elements) {
        var arrdom=$elements;  
        var  array=[]; //Receive sorted data
        callbacks: {
          reordering: reordering,
          reordered: reordered
      //Set how element blocks are displayed
        base: 100, // Child element width px 
        gutter: 20, // spacing px
        columns: 7 //7 column


The effect is as follows:

Explain below: This plug-in is simple and easy to use. When we find that setting how many columns and row spacing to display does not work, we might as well open the gridly.js source code, find the following method, and set it up.

Download address: https://files.cnblogs.com/files/mobeisanghai/jquery.gridly.rar
This is the end of the explanation. This article was originally created by the author. If it is reproduced, please indicate the source of the article:
Author: Sanghai, Mobei

Posted by parse-error on Wed, 12 Feb 2020 08:55:44 -0800