Sortierbares JqueryUI-Beispiel

Das Sortierbare ist ein flexibles Sortier-Plugin für jQueryUI, das es ermöglicht, die Elemente in einer sinnvollen Reihenfolge neu anzuordnen, damit wir sie effektiver analysieren können. Es ermöglicht das Sortieren von Elementen mithilfe der Drag-and-Drop-Funktionalität, um das neue Element in der Liste zu platzieren und andere Elemente entsprechend anzupassen. Das sortable-Ereignis ermöglicht außerdem, die Elemente in einer Liste vertikal oder horizontal mit der Maus zu sortieren.

lesen Sie auch:

  • JQuery Keydown, Keypress und Keyup
  • JQUEry-Einstellungs-Dropdown-Wert
  • JQuery prepend() und prependTo()

Die sortierbare Methode kann in den folgenden Formen verwendet werden:

  • $(Selektor, Kontext). sortierbar (Optionen)
  • $(Selektor, Kontext). sortierbar („Aktionen“, [params])

Das folgende Beispiel demonstriert eine einfache Sortiertechnik:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#sortMe
	{
	    list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	.myList
        {
		background: gray;
		border: 1px solid cyan;
	 }
</style>
<script>
   $(function(){
      $("#sortMe").sortable();
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Simple Sorting Example</h2>
   <ul id="sortMe">
      <li  >India</li>
      <li  >Srilanka</li>
      <li  >Australia</li>
      <li  >South Africa</li>
      <li  >China</li>
      <li  >Japan</li>
      <li  >Italy</li>
      <li  >France</li>
      <li  >Canada</li>
      <li  >Brazil</li>
   </ul>
</body>
</html>
  • Das obige Skript verwendet die Methode sortable(), um die Elemente in einer Liste mithilfe des ID-Selektors „#sortMe“ neu anzuordnen.
  • Die Elemente werden in einer ungeordneten Liste mit der im li-Tag definierten Klasse „.myList“ definiert. Die Klasse verwendet verschiedene CSS-Stile, um die Elemente effektiver auf der Webseite anzuzeigen.

Führen Sie die JQueryUI Simple Sortable Demo aus

JQueryUI einfaches sortierbares Beispiel

Sortierbare Widget-Optionen

Die sortierbare Methode enthält folgende Optionen:

Option Beschreibung Standardwert

AnhängenEs hängt das angegebene Element an, das sich beim Ziehen mit der Maus bewegt.Elternteil
AchseEs definiert die Achse, um die sich die gezogenen Elemente entlang der Werte wie der horizontalen oder vertikalen Achse bewegen.FALSCH
stornierenEs wird verwendet, um den Sortiervorgang für das angegebene Element abzubrechen.Eingabe, Textbereich, Schaltfläche, Auswahl, Option
verbinden mitEs verbindet die eine Liste mit der anderen Liste zur Benutzerinteraktion und wird auch als unidirektionale Beziehung bezeichnet.FALSCH
EindämmungEs sortiert das angegebene Element innerhalb der Grenzen der Region.FALSCH
MauszeigerEs gibt den Cursor an, wenn sich ein Element bewegt.Auto
CursorAtEs gibt den Offset zum Mauszeiger an.FALSCH
VerzögerungEs gibt die Verzögerungszeit in Millisekunden an, wenn die Mausbewegung berücksichtigt wird.0
deaktiviertEs deaktiviert die Sortierung von Elementen, wenn es auf „true“ gesetzt ist, dh es stoppt den Sortiervorgang.FALSCH
DistanzEs bestimmt die Verschiebung, die Maus muss bewegt werden, bevor die Sortierung in Form von Pixeln beginnt.1
dropOnEmptyDie Elemente können nicht auf leerer Connect-Sortable abgelegt werden, wenn sie auf „false“ gesetzt ist.WAHR
forceHelperSizeEs teilt dem Helfer mit, dass er eine Größe haben soll, wenn diese auf „true“ gesetzt ist.FALSCH
forcePlaceholderSizeWenn ein Element verschoben wird, definiert es die Größe des Platzhalters, wenn es auf true gesetzt ist.FALSCH
NetzEs sortiert die Elemente nach einem Rastersystem mit x- und y-Pixeln in Form von [x,y].FALSCH
handhabenDas Handle, das den Sortiervorgang startet.Original
OpazitätEs sorgt für die Deckkraft des Elements beim Sortieren.FALSCH
zurückkehrenNach Abschluss der Sortierung wird das Element wieder an seine ursprüngliche Position zurückgesetzt.FALSCH
scrollenEs aktiviert die Scrollfunktion und scrollt das Element, wenn es an eine Kante kommt.WAHR
scrollSensitivityEs definiert die Scrollfunktion und gibt an, um wie viele Pixel die Maus den sichtbaren Bereich verlassen muss, um mit dem Scrollen zu beginnen.20
ScrollgeschwindigkeitEs zeigt die Scrollgeschwindigkeit an.20
ToleranzEs definiert, ob das Element, das verschoben wird, auf einem anderen Element schwebt oder nicht.schneiden
zIndexEs initialisiert den Z-Index für den Helfer während der Sortierung.1000

Das folgende Beispiel veranschaulicht die Verwendung der Eindämmungsoption:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	.mylist {
		background-color: orange;
		text-align: center;
		border: 2px solid green;
	}
	.myelements {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.myelements li {
		float: left;
		margin: 2px;
		padding: 2px;
		width: 60px;
		height: 60px;
	}
</style>
<script>
$(function () {
        $("#element1").sortable({
                containment: "#container"
        });
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Using Containment Option</h2>
<div id="container" style="float:left;width:300px;border:1px solid red;height:250px">
    <ul id="element1"  >
        <li  >A</li>
        <li  >B</li>
        <li  >C</li>
        <li  >D</li>
        <li  >E</li>
        <li  >F</li>
        <li  >G</li>
        <li  >H</li>
        <li  >I</li>
        <li  >J</li>
        <li  >K</li>
        <li  >L</li>
    </ul>
</div>
</body>
</html>
  • Das obige Skript verwendet die Einschlussoption, die ein Element angibt, innerhalb dessen die Verschiebung stattfindet.
  • Die Option verwendet den ID-Selektor „#element1“, um Elemente sortierbar zu machen. Alle Elemente werden innerhalb des div-Elements mithilfe des ID-Selektors „#container“ angezeigt, und die Einschlussoption verwendet diesen ID-Selektor, um das Ergebnis mithilfe von CSS-Stilen anzuzeigen.

Führen Sie die Demo zu sortierbaren JQueryUI-Optionen aus

Beispiel für sortierbare JQueryUI-Optionen

Das folgende Beispiel zeigt die Verwendung der Optionen connectWith und dropOnEmpty:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	     #mysort1, #mysort2,#mysort3 {
	          list-style-type: none;
	          margin: 0;
	          padding: 0;
	          width: 20%;
	          float:left
	      }
	      #mysort1 li, #mysort2 li, #mysort3 li {
	          margin: 2px;
	          padding: 0.4em;
			  padding-left: 3em;
			  font-size: 20px;
			  height: 20px;
		  }
	      .mylist {
	          background-color: orange;
	          border: 2px solid green;
	      }
	   </style>
	   <script>
	      $(function() {
	         $( "#mysort1, #mysort2" ).sortable({
	            connectWith: "#mysort1, #mysort2"
	         });
	         $( "#mysort3").sortable({
	            connectWith: "#mysort2",
	            dropOnEmpty: false
	         });
	      });
	   </script>
	<title>JQueryUI Example</title>
	</head>
	<body>
	<h2>Using connectWith and dropOnEmpty Options</h2>
	   <ul id="mysort1">
	   <h3>Table 1</h3>
	      <li  >A</li>
	      <li  >B</li>
	      <li  >C</li>
	      <li  >D</li>
	   </ul>
	   <ul id="mysort2">
	   <h3>Table 2</h3>
	      <li  >E</li>
	      <li  >F</li>
	      <li  >G</li>
	      <li  >H</li>
	   </ul>
	   <ul id="mysort3">
	   <h3>Table 3</h3>
	      <li  >I</li>
	      <li  >J</li>
	      <li  >K</li>
	      <li  >L</li>
	   </ul>
	</body>
</html>
  • Das Skript nutzt sortierbare Optionen wie connectWith und dropOnEmpty.
  • Die Option connectWith identifiziert ein weiteres sortierbares Element, das das Verschieben von Elementen aus einer Liste in eine andere Liste ermöglicht.
  • Im Skript konnten wir sehen, dass Tabelle 1 und Tabelle 2 miteinander verbunden sind, indem die Zeile connectWith: „#mysort1, #mysort2“ verwendet wird. Wir könnten Elemente nur wie in der vorherigen Zeile erwähnt von Tabelle1 nach Tabelle2 verschieben.
  • Die Option „dropOnEmpty“ kann die Elemente auf einem leeren Connect-Sortable nicht löschen, da sie im Skript auf „false“ gesetzt ist. Die Table3-Elemente können nicht nach Table1 verschoben werden, da wir Table3 mit Table2 verbinden, wie im Skript gezeigt.

Führen Sie JQueryUI Sortable Options Demo1 aus

Beispiel für sortierbare JQueryUI-Optionen1

Das folgende Beispiel zeigt die Verwendung von Verzögerungs- und Distanzoptionen:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#selectMe1,#selectMe2{
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	.myList {
		background: gray;
		border: 1px solid cyan;
		color:orange;
    }
</style>
<script>
   $(function(){
      $("#selectMe1").sortable({
         delay: 500
      });
      $("#selectMe2").sortable({
	     distance:30
	  });
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Sorts after Delay of 500ms </h2>
   <ul id="selectMe1">
      <li  >India</li>
      <li  >Srilanka</li>
      <li  >Australia</li>
      <li  >South Africa</li>
   </ul>
   <h2>Sorts after the distance of 30px</h2>
   <ul id="selectMe2">
      <li  >China</li>
      <li  >Japan</li>
      <li  >Italy</li>
      <li  >France</li>
      <li  >Canada</li>
      <li  >Brazil</li>
   </ul>
</body>
</html>
  • Das obige Skript verwendet Optionen wie Verzögerung und Distanz.
  • Die Verzögerungsoption definiert die Verzögerung in Millisekunden, nach der die erste Mausbewegung berücksichtigt wird. Im Skript haben wir „Verzögerung: 500“ definiert, was bedeutet, dass wir die Elemente nach 500 Millisekunden sortieren können.
  • Die Distanzoption definiert die Anzahl der Pixel, die die Maus bewegen muss, bevor die Sortierung beginnt. Im Skript haben wir „Abstand: 30“ verwendet, was bedeutet, dass die Elemente nach dem Abstand von 30 Pixel sortiert werden.

Führen Sie JQueryUI Sortable Options Demo2 aus

Beispiel für sortierbare JQueryUI-Optionen2

Sortierbare Widget-Methoden

Die folgende Tabelle zeigt einige der Methoden, die mit sortierbaren Widgets verwendet werden:

Methodenbeschreibung

zerstören()Es entfernt die Sortierbarkeitsfunktion.
stornieren()Dadurch wird die aktuelle Sortierfunktion abgebrochen.
deaktivieren()Diese Methode deaktiviert den Sortiervorgang.
aktivieren()Diese Methode ermöglicht den sortierbaren Vorgang.
Optionen()Es gibt die Optionseigenschaft zurück. Es legt den sortierbaren Vorgang mit dem angegebenen Optionsnamen fest.
AktualisierungEs aktualisiert die Position und Größe der sortierbaren Elemente und akzeptiert keine Argumente.
toArrayEs gibt das Array der Artikel-IDs in der sortierten Reihenfolge zurück.
serialisierenEs definiert eine serialisierte Abfragezeichenfolge in eine über ein Formular übermittelbare Zeichenfolge.
widget()Es definiert ein sortierbares Element mit einem jQuery-Objekt.

Das folgende Beispiel zeigt die Verwendung der Aktivierungs- und Zerstörungsmethoden:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#mysort2 li, #mysort3 li {
			  margin: 2px;
			  padding: 0.4em;
			  padding-left: 3em;
			  font-size: 20px;
			  height: 20px;
	  }
	 #mysort2,#mysort3 {
			  list-style-type: none;
			  margin: 0;
			  padding: 0;
			  width: 20%;
			  float:left
	  }
	  .mylist {
			  background-color: orange;
			  border: 2px solid green;
	  }
</style>
<script type="text/javascript">
   $(function(){
	   $("#mysort2").sortable();
	   $("#mysort2").sortable('enable');
	   $("#mysort3").sortable();
	   $("#mysort3").sortable('destroy');
   });
</script>
</head>
<body>
<h2>Using Enable and Destroy Methods</h2>
	<ul id="mysort2">
	<h3>Enabled Sorting</h3>
		  <li  >E</li>
		  <li  >F</li>
		  <li  >G</li>
		  <li  >H</li>
	</ul>
	<ul id="mysort3">
	<h3>Destroyed Sorting</h3>
		  <li  >I</li>
		  <li  >J</li>
		  <li  >K</li>
		  <li  >L</li>
    </ul>
</body>
</html>
  • Das Skript nutzt sortierbare Methoden wie „Enable“ und „Destroy“.
  • Die Methode „enable“ aktiviert die Sortierbarkeitsfunktion für sortierbare Elemente in der Liste oder Menge.
  • Die Methode destroy entfernt die Sortierbarkeitsfunktion vollständig. Dadurch wird das Element in seinen Zustand vor der Initialisierung zurückversetzt.

Führen Sie die Demo zu sortierbaren Methoden von JQueryUI aus

Beispiel für sortierbare JQueryUI-Methoden

Sortierbare Widget-Ereignisse

Die folgende Tabelle zeigt Ereignisse, die mit sortierbaren Widgets verwendet werden:

Eventbeschreibung

aktivieren(Ereignis, ui)Dieses Ereignis wird ausgelöst, wenn der Sortiervorgang für die akzeptablen Elemente beginnt.
create(event, ui)Es wird ausgelöst, wenn ein sortierbares Element erstellt wird.
deaktivieren(Ereignis, UI)Es wird ausgelöst, wenn ein ziehbares Element die Sortierung stoppt.
change(event, ui)Es wird ausgelöst, wenn das sortierte Element die Position ändert.
recieve(event, ui)Es wird ausgelöst, wenn ein Sortierelement Elemente aus der anderen Liste empfängt.
out(event, ui)Es wird ausgelöst, wenn ein sortierbares Element aus dem Sortiervorgang verschoben wird.
over(event, ui)Es wird ausgelöst, wenn ein sortierbares Element in die sortierbare Liste einsortiert wird.
start(event, ui)Es wird ausgelöst, wenn der Sortiervorgang beginnt.
stop(event, ui)Es wird ausgelöst, wenn der Sortiervorgang endet.
sort(event, ui)Es wird während des Sortiervorgangs ausgelöst.
update(event, ui)Es wird ausgelöst, wenn der Benutzer den Sortiervorgang stoppt und die Position des Elements geändert wurde.

Das folgende Beispiel veranschaulicht die Verwendung von Start- und Stoppereignissen:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	<style type="text/css">
	.mylist {
			background-color: orange;
			text-align: center;
			border: 2px solid green;
		}
		#element1 {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		#element1 li {
			float: left;
			margin: 2px;
			padding: 2px;
			width: 60px;
			height: 60px;
	}

	.highlight {
	    border: 2px solid red;
	    font-weight: bold;
	    font-size: 40px;
	    background-color: lightblue;
	}
	</style>
	<script>
	$(function () {
	        $("#element1").sortable({
	                start: function (event, ui) {
	                        ui.item.toggleClass("highlight");
	                },
	                stop: function (event, ui) {
	                        ui.item.toggleClass("highlight");
	                }
	        });
	});
	</script>
<div id="container" style="float:left;width:300px;border:1px solid red;height:250px">
	   <ul id="element1">
			<li  >A</li>
			<li  >B</li>
			<li  >C</li>
			<li  >D</li>
			<li  >E</li>
			<li  >F</li>
			<li  >G</li>
			<li  >H</li>
			<li  >I</li>
			<li  >J</li>
			<li  >K</li>
			<li  >L</li>
	  </ul>
</div>
</body>
</html>
  • Das Skript verwendet sortierbare Ereignisse namens Start und Stopp.
  • Das Startereignis wird ausgelöst, wenn ein Sortiervorgang beginnt.
  • Das Stoppereignis tritt ein, wenn ein Sortiervorgang endet.
  • Wir haben eine Klasse namens „highlight“ verwendet, die umschaltet, wenn wir auf das Element klicken, und das Element wird mit rotem Farbrand und hellblauer Hintergrundfarbe angezeigt.

Führen Sie die JQueryUI Sortable Events-Demo aus

Beispiel für sortierbare JQueryUI-Ereignisse

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen