jQuery-Code zum Implementieren des freien Ziehens und Sortierens von Elementen

Obwohl das Sortieren durch Auf- und Abbewegen von Elementen erreicht werden kann, ist es nicht flexibel genug und starr und kann den gewünschten Sortierzweck nicht schnell erreichen. Im Folgenden erklären wir Ihnen, wie Sie per Drag & Drop schnell an die gewünschte Sortierposition ziehen.

Zuerst müssen wir ein Plug-in „gridly.js“ einführen, um das Ziehen von Elementen zu implementieren.

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

Die folgenden einfachen Zeilen von js-Code können die von uns gewünschte Funktion erreichen:

 ( 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

Der Effekt ist wie folgt:

Erklärung unten: Dieses Plug-in ist sehr einfach und benutzerfreundlich. Wenn wir feststellen, dass das Festlegen der Anzahl der anzuzeigenden Spalten und des Zeilenabstands keine Auswirkung hat, können wir genauso gut den Quellcode von „gridly.js“ öffnen und die folgende Methode finden , und richten Sie es ein.

Verwandte Empfehlungen:

jQuery Drag-Sorting-Plug-in zum Erstellen eines Drag-Sorting-Effekts (mit Quellcode-Download)_jquery

Jquery Drag Sorting einfache Implementierungsmethode (erweiterte Version)_jquery

Das obige ist der detaillierte Inhalt vonjQuery-Code zum Implementieren des freien Ziehens und Sortierens von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!