jQuery UI API - Sortable Widget

Kategorie

Interaktionen

Nutzung

Beschreibung:Verwenden Sie die Maus, um die Reihenfolge von Elementen in einer Liste oder einem Raster anzupassen.

Hinzugefügt in Version:1.0

D:

Hinweise:Das jQuery UI Sortable-Plugin macht ausgewählte Elemente durch Ziehen mit der Maus sortierbar.

Hinweise:Um Tabellenzeilen zu sortieren,tbodymuss sortierbar sein, nichttable。

Schnellnavigation

Optionen Methoden Ereignisse

Optionen Type Beschreibung Standardwert
appendTo jQuery oder Element oder Selector oder String Beim Ziehen: Wo das mit der Maus bewegte Hilfselement angehängt werden soll (zum Beispiel, um Überlappungs-/zIndex-Probleme zu lösen).

Unterstützt mehrere Typen:

  • jQuery: Ein jQuery-Objekt, das das Element enthält, an das das Hilfselement angehängt werden soll.
  • Element: Das Element, an das das Hilfselement angehängt werden soll.
  • Selector: Ein Selektor, der angibt, welches Element das Hilfselement anhängen soll.
  • String: String"parent"Bewirkt, dass das Hilfselement ein Geschwisterelement der sortierbaren Elemente wird.

Codebeispiele:

Initialisiert das Sortable mit den angegebenenappendTooption:

$( ".selector" ).sortable({ appendTo: document.body });
    

Nach der Initialisierung abrufen oder festlegenappendTooption:

// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
 
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
    
 "parent"
axis String Wenn definiert, können Elemente nur horizontal oder vertikal gezogen werden. Mögliche Werte:"x", "y"。

Codebeispiele:

Initialisiert das Sortable mit den angegebenenaxisoption:

$( ".selector" ).sortable({ axis: "x" });
    

Nach der Initialisierung abrufen oder festlegenaxisoption:

// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
 
// setter
$( ".selector" ).sortable( "option", "axis", "x" );
    
 false
Abbruch Selektor Verhindert, dass das Sortieren auf Elementen beginnt, die dem Selektor entsprechen.

Codebeispiele:

Initialisiert das Sortable mit den angegebenencanceloption:

$( ".selector" ).sortable({ cancel: "a,button" });
    

Nach der Initialisierung abrufen oder festlegencanceloption:

// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
 
// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
    
 "input, textarea, button, select, option"
connectWith Selektor Selektor anderer sortierbarer Elemente, mit denen die Elemente in dieser Liste verbunden werden sollen. Dies ist eine einseitige Beziehung, und wenn Sie möchten, dass Elemente in beide Richtungen verbunden werden, müssen Sie dieconnectWithOption auf beiden sortierbaren Elementen festlegen.

Codebeispiele:

Initialisiert das Sortable mit den angegebenenconnectWithoption:

$( ".selector" ).sortable({ connectWith: "#shopping-cart" });
    

Nach der Initialisierung abrufen oder festlegenconnectWithoption:

// getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
 
// setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
    
 false
containment Element oder Selektor oder String Definiert die Grenzen, innerhalb derer die sortierbaren Elemente beim Ziehen eingeschränkt werden.

Hinweis: Das für containment angegebene Element muss eine berechnete Breite und Höhe haben (obwohl sie nicht explizit sein müssen). Wenn Sie beispielsweisefloat: leftsortierbare Kinder haben und angebencontainment: "parent", stellen Sie sicher, dass Sie am sortierbaren/übergeordneten Containerfloat: left, andernfalls hat erheight: 0, was zu undefiniertem Verhalten führt.

Unterstützt mehrere Typen:

  • Element: Ein Element, das als Container verwendet werden soll.
  • Selektor: Ein Selektor, der ein Element angibt, das als Container verwendet werden soll.
  • String: Eine Zeichenfolge, die ein Element identifiziert, das als Container verwendet werden soll. Mögliche Werte:"parent"、"document"、"window"。

Codebeispiele:

Initialisiert das Sortable mit den angegebenencontainmentoption:

$( ".selector" ).sortable({ containment: "parent" });
    

Nach der Initialisierung abrufen oder festlegencontainmentoption:

// getter
var containment = $( ".selector" ).sortable( "option", "containment" );
 
// setter
$( ".selector" ).sortable( "option", "containment", "parent" );
    
 false
cursor String Legt den Cursor fest, der beim Sortieren angezeigt wird.

Codebeispiele:

Initialisiert das Sortable mit den angegebenencursoroption:

$( ".selector" ).sortable({ cursor: "move" });
    

Nach der Initialisierung abrufen oder festlegencursoroption:

// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
 
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );
    
 "auto"
cursorAt Objekt Verschiebt das sortierte Element oder den Helper so, dass der Cursor immer aus derselben Position zu ziehen scheint. Die Koordinaten können als Hash mit einem oder zwei Schlüsseln angegeben werden:{ top, left, right, bottom }。

Codebeispiele:

Initialisiert das Sortable mit den angegebenencursorAtoption:

$( ".selector" ).sortable({ cursorAt: { left: 5 } });
    

Nach der Initialisierung abrufen oder festlegencursorAtoption:

// getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
 
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );
    
 false
delay Integer Zeit in Millisekunden nach mousedown, bis das Sortieren beginnt. Diese Option kann unerwünschtes Ziehen verhindern, wenn auf ein Element geklickt wird.

Codebeispiele:

Initialisiert das Sortable mit den angegebenendelayoption:

$( ".selector" ).sortable({ delay: 150 });
    

Nach der Initialisierung abrufen oder festlegendelayoption:

// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
 
// setter
$( ".selector" ).sortable( "option", "delay", 150 );
    
 0
disabled Boolean Wenn festgelegt auftrue, deaktiviert das Sortable.

Codebeispiele:

Initialisiert das Sortable mit den angegebenendisabledoption:

$( ".selector" ).sortable({ disabled: true });
    

Nach der Initialisierung abrufen oder festlegendisabledoption:

// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
 
// setter
$( ".selector" ).sortable( "option", "disabled", true );
    
 false
distance Number Entfernung in Pixeln, die die Maus nach mousedown zurücklegen muss, bevor das Sortieren beginnt. Wenn angegeben, beginnt das Sortieren erst, wenn die Maus über die angegebene Entfernung hinaus gezogen wird. Diese Option kann verwendet werden, um Klicks auf Elemente innerhalb eines Handles zu ermöglichen.

Codebeispiele:

Initialisiert das Sortable mit den angegebenendistanceoption:

$( ".selector" ).sortable({ distance: 5 });
    

Nach der Initialisierung abrufen oder festlegendistanceoption:

// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
 
// setter
$( ".selector" ).sortable( "option", "distance", 5 );
    
 1
dropOnEmpty Boolean Wenn festgelegt auffalse, Elemente aus diesem Sortable können nicht auf einem leeren verbundenen Sortable abgelegt werden (siehe dieconnectWith-Option).

Codebeispiele:

Initialisiert das Sortable mit den angegebenendropOnEmptyoption:

$( ".selector" ).sortable({ dropOnEmpty: false });
    

Nach der Initialisierung abrufen oder festlegendropOnEmptyoption:

// getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
 
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );
    
 wahr
forceHelperSize Boolean Wenn festgelegt auftrue, erzwingt, dass der Helper eine Größe hat.

Codebeispiele:

Initialisiert das Sortable mit den angegebenenforceHelperSizeoption:

$( ".selector" ).sortable({ forceHelperSize: true });
    

Nach der Initialisierung abrufen oder festlegenforceHelperSizeoption:

// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
 
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
    
 false
forcePlaceholderSize Boolean Wenn festgelegt auftrue, erzwingt, dass der Platzhalter eine Größe hat.

Codebeispiele:

Initialisiert das Sortable mit den angegebenenforcePlaceholderSizeoption:

$( ".selector" ).sortable({ forcePlaceholderSize: true });
    

Nach der Initialisierung abrufen oder festlegenforcePlaceholderSizeoption:

// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
 
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
    
 false
grid Array Rastet das sortierte Element oder den Helper an einem Raster aus, und zwar in x- und y-Pixel-Schritten. Das Array muss die Form haben[ x, y ]。

Codebeispiele:

Initialisiert das Sortable mit den angegebenengridoption:

$( ".selector" ).sortable({ grid: [ 20, 10 ] });
    

Nach der Initialisierung abrufen oder festlegengridoption:

// getter
var grid = $( ".selector" ).sortable( "option", "grid" );
 
// setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );
    
 false
handle Selektor oder Element Wenn angegeben, wird der Start des Sortierens auf das angegebene Element beschränkt.

Codebeispiele:

Initialisiert das Sortable mit den angegebenenhandleoption:

$( ".selector" ).sortable({ handle: ".handle" });
    

Nach der Initialisierung abrufen oder festlegenhandleoption:

// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
 
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );
    
 false
helper String oder Function() Ermöglicht die Verwendung eines Hilfselements für die Anzeige beim Ziehen.

Unterstützt mehrere Typen:

  • String: Wenn auf"clone", wird das Element geklont, und der Klon wird gezogen.
  • Function: Eine Funktion, die ein DOMElement zurückgibt, das beim Ziehen verwendet wird. Die Funktion erhält das Ereignis und das Element, das sortiert wird.

Codebeispiele:

Initialisiert das Sortable mit den angegebenenhelperoption:

$( ".selector" ).sortable({ helper: "clone" });
    

Nach der Initialisierung abrufen oder festlegenhelperoption:

// getter
var helper = $( ".selector" ).sortable( "option", "helper" );
 
// setter
$( ".selector" ).sortable( "option", "helper", "clone" );
    
 "original"
items Selektor Welche Elemente innerhalb des Elements sortierbar sein sollen.

Codebeispiele:

Initialisiert das Sortable mit den angegebenenitemsoption:

$( ".selector" ).sortable({ items: "> li" });
    

Nach der Initialisierung abrufen oder festlegenitemsoption:

// getter
var items = $( ".selector" ).sortable( "option", "items" );
 
// setter
$( ".selector" ).sortable( "option", "items", "> li" );
    
 "> *"
opacity Number Die Deckkraft des Hilfselements beim Sortieren. Von0.01auf1。

Codebeispiele:

Initialisiert das Sortable mit den angegebenenopacityoption:

$( ".selector" ).sortable({ opacity: 0.5 });
    

Nach der Initialisierung abrufen oder festlegenopacityoption:

// getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
 
// setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );
    
 false
placeholder String Der anzuwendende Klassenname, andernfalls weißer Leerraum.

Codebeispiel:

Initialisieren mit den angegebenenplaceholderOptionen für sortable:

$( ".selector" ).sortable({ placeholder: "sortable-placeholder" });
    

Nach der Initialisierung: Abrufen oder Festlegenplaceholderoption:

// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
 
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );
    
 false
revert Boolean oder Number Ob sortierbare Elemente eine weiche Animation verwenden, um an ihre neue Position zurückzukehren.

Unterstützt mehrere Typen:

  • BooleanWenn gesetzt auftrue, verwendet das Element eine Animation mit der Standarddauer.
  • Number: Die Dauer der Animation in Millisekunden.

Codebeispiel:

Initialisieren mit den angegebenenrevertOptionen für sortable:

$( ".selector" ).sortable({ revert: true });
    

Nach der Initialisierung: Abrufen oder Festlegenrevertoption:

// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
 
// setter
$( ".selector" ).sortable( "option", "revert", true );
    
 false
scroll Boolean Wenn festgelegt auftrue, scrollt die Seite, wenn der Rand erreicht wird.

Codebeispiel:

Initialisieren mit den angegebenenscrollOptionen für sortable:

$( ".selector" ).sortable({ scroll: false });
    

Nach der Initialisierung: Abrufen oder Festlegenscrolloption:

// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
 
// setter
$( ".selector" ).sortable( "option", "scroll", false );
    
 wahr
scrollSensitivity Number Definiert, wie weit der Mauszeiger vom Rand entfernt sein muss, damit das Scrollen beginnt.

Codebeispiel:

Initialisieren mit den angegebenenscrollSensitivityOptionen für sortable:

$( ".selector" ).sortable({ scrollSensitivity: 10 });
    

Nach der Initialisierung: Abrufen oder FestlegenscrollSensitivityoption:

// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );
    
 20
scrollSpeed Number Wenn sich der Mauszeiger innerhalbscrollSensitivitydistance befindet, die Geschwindigkeit, mit der das Fenster scrollt. WennscrollOption istfalsedann wird sie ignoriert.

Codebeispiel:

Initialisieren mit den angegebenenscrollSpeedOptionen für sortable:

$( ".selector" ).sortable({ scrollSpeed: 40 });
    

Nach der Initialisierung: Abrufen oder FestlegenscrollSpeedoption:

// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
    
 20
tolerance String Gibt den Modus an, der verwendet wird, um zu prüfen, ob ein bewegtes Element ein anderes Element überlappt. Mögliche Werte:
  • "intersect": Das Element überlappt das andere Element um mindestens 50%.
  • "pointer": Der Mauszeiger überlappt das andere Element.

Codebeispiel:

Initialisieren mit den angegebenentoleranceOptionen für sortable:

$( ".selector" ).sortable({ tolerance: "pointer" });
    

Nach der Initialisierung: Abrufen oder Festlegentoleranceoption:

// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
 
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );
    
 "intersect"
zIndex Integer Der Z-Index des Elements/Helpers während des Sortierens.

Codebeispiel:

Initialisieren mit den angegebenenzIndexOptionen für sortable:

$( ".selector" ).sortable({ zIndex: 9999 });
    

Nach der Initialisierung: Abrufen oder FestlegenzIndexoption:

// getter
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
 
// setter
$( ".selector" ).sortable( "option", "zIndex", 9999 );
    
 1000

Methoden Gibt zurück Beschreibung
cancel() jQuery (nur Plugin) Bricht eine Änderung im aktuellen Sortable während des aktuellen Sortiervorgangs ab und kehrt zum vorherigen Zustand zurück. Nützlich in den Callbacks stop und receive.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Aufruf der cancel-Methode:

$( ".selector" ).sortable( "cancel" );
    
destroy() jQuery (nur Plugin) Entfernt die Sortable-Funktionalität vollständig. Dadurch wird das Element in seinen Zustand vor der Initialisierung zurückversetzt.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Aufruf der destroy-Methode:

$( ".selector" ).sortable( "destroy" );
    
disable() jQuery (nur Plugin) Deaktiviert das Sortable.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Aufruf der disable-Methode:

$( ".selector" ).sortable( "disable" );
    
enable() jQuery (nur Plugin) Aktiviert das Sortable.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Aufruf der enable-Methode:

$( ".selector" ).sortable( "enable" );
    
option( optionName ) Objekt Ruft den Wert ab, der aktuell dem angegebenen zugeordnet istoptionName.
  • optionName
    Typ: String
    Beschreibung: Der Name der Option, die abgerufen werden soll.

Codebeispiel:

Aufruf dieser Methode:

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
    
option() PlainObject Ruft ein Objekt ab, das Schlüssel/Wert-Paare enthält, die den aktuellen Draggable-Options-Hash darstellen.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Aufruf dieser Methode:

var options = $( ".selector" ).sortable( "option" );
    
option( optionName, value ) jQuery (nur Plugin) Setzt den Sortable-Optionswert, der dem angegebenen zugeordnet ist.optionName.
  • optionName
    Typ: String
    Beschreibung: Der Name der Option, die festgelegt werden soll.
  • value
    Typ: Object
    Beschreibung: Der Wert, der für die Option festgelegt werden soll.

Codebeispiel:

Aufruf dieser Methode:

$( ".selector" ).sortable( "option", "disabled", true );
    
option( options ) jQuery (nur Plugin) Legt eine oder mehrere Optionen für das Sortable fest.
  • options
    Typ: Object
    Beschreibung: Die Options-Wert-Paare, die festgelegt werden sollen.

Codebeispiel:

Aufruf dieser Methode:

$( ".selector" ).sortable( "option", { disabled: true } );
    
refresh() jQuery (nur Plugin) Aktualisiert die Sortable-Elemente. Löst ein Neuladen aller Sortable-Elemente aus, wodurch neue Elemente erkannt werden.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Aufruf der refresh-Methode:

$( ".selector" ).sortable( "refresh" );
    
refreshPositions() jQuery (nur Plugin) Aktualisiere die zwischengespeicherten Positionen der sortierbaren Elemente. Der Aufruf dieser Methode aktualisiert die zwischengespeicherten Positionen aller sortierbaren Elemente.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Aufruf der Methode refreshPositions:

$( ".selector" ).sortable( "refreshPositions" );
    
serialize( options ) String Serialisiere die sortierbaren Elementeidin einen per Formular/Ajax übermittelbaren String. Der Aufruf dieser Methode erzeugt einen Hash, der an jede URL angehängt werden kann, um eine neue Elementreihenfolge einfach an den Server zurückzusenden.

Standardmäßig funktioniert es über dasidAttribut jedes Elements, mit dem Format"setname_number", und es erzeugt einen Hash der Form"setname[]=number&setname[]=number".

Hinweis: Wenn die Serialisierung einen leeren String zurückgibt, stelle sicher, dassiddas Attribut einen Unterstrich (_) enthält. Das Format muss"set_number". Zum Beispiel einidAttribut von"foo_1"、"foo_5"、"foo_2"mit 3 Elementen wird serialisiert als"foo[]=1&foo[]=5&foo[]=2". Sie können Unterstriche (_), Gleichheitszeichen (=) oder Bindestriche (-) verwenden, um das Set und die Nummer zu trennen. Zum Beispiel,"foo=1"、"foo-1"、"foo_1"alle serialisieren zu"foo[]=1"。

  • options
    Typ: Object
    Optionen zum Anpassen der Serialisierung.
    • key(Standard:The part before the delimiter in the attribute）
      Typ: String
      Beschreibung: Ersetzenpart1[]mit dem angegebenen Wert.
    • attribute(Standard:"id"）
      Typ: String
      Beschreibung: Der Attributname, der für den Wert verwendet werden soll.
    • expression(Standard:/(.+)[-=_](.+)/）
      Typ: RegExp
      Beschreibung: Ein regulärer Ausdruck zum Aufteilen des Attributwerts in einen Schlüssel und einen Wert.

Codebeispiel:

Aufruf der serialize-Methode:

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
    
toArray( options ) Array Serialisiere die sortierbaren Elementeidin ein Array aus Zeichenketten.
  • options
    Typ: Object
    Optionen zum Anpassen der Serialisierung.
    • attribute(Standard:"id"）
      Typ: String
      Beschreibung: Der Attributname, der für den Wert verwendet werden soll.

Codebeispiel:

Aufruf der toArray-Methode:

var sortedIDs = $( ".selector" ).sortable( "toArray" );
    
widget() jQuery Gibt einjQueryObjekt, das die sortierbaren Elemente enthält.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

die Widget-Methode

var widget = $( ".selector" ).sortable( "widget" );
    

Ereignisse Type Beschreibung
activate( event, ui ) sortactivate Dieses Ereignis wird ausgelöst, wenn bei Verwendung einer verbundenen Liste diese es zu Beginn des Ziehens empfängt.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das den Helper darstellt, der sortiert wird.
    • item
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das aktuell gezogene Element darstellt.
    • offset
      Typ: Object
      Beschreibung: Die aktuelle absolute Position des Helpers, dargestellt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Die aktuelle Position des Helpers, dargestellt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Die ursprüngliche Position des Elements, dargestellt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem Sortable zu einem anderen verschoben wird, das Sortable, von dem das Element stammt.
    • placeholder
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das als Platzhalter verwendete Element repräsentiert.

Codebeispiel:

Initialisiert das Sortable mit dem angegebenen activate-Callback:

$( ".selector" ).sortable({
activate: function( event, ui ) {}
});
    

Bindet einen Event-Listener an das sortactivate-Ereignis:

$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
    
beforeStop( event, ui ) sortbeforestop Dieses Ereignis wird ausgelöst, wenn das Sortieren beendet wird, außer wenn der Platzhalter/Helper noch verfügbar ist.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das den sortierten Helper repräsentiert.
    • item
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das aktuell gezogene Element repräsentiert.
    • offset
      Typ: Object
      Beschreibung: Aktuelle absolute Position des Helpers, dargestellt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Aktuelle Position des Helpers, dargestellt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Ursprüngliche Position des Elements, dargestellt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem sortable zu einem anderen verschoben, das sortable, von dem das Item kam.
    • placeholder
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das als Platzhalter verwendete Element darstellt.

Codebeispiel:

Initialisiere ein sortable mit dem angegebenen beforeStop-Callback:

$( ".selector" ).sortable({
beforeStop: function( event, ui ) {}
});
    

Binde einen Event-Listener an das sortbeforestop-Event:

$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );
    
change( event, ui ) sortchange Wird während des Sortierens ausgelöst, außer wenn sich die DOM-Position ändert.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das den sortierten Helper repräsentiert.
    • item
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das aktuell gezogene Element repräsentiert.
    • offset
      Typ: Object
      Beschreibung: Aktuelle absolute Position des Helpers, dargestellt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Aktuelle Position des Helpers, dargestellt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Ursprüngliche Position des Elements, dargestellt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem sortable zu einem anderen verschoben, das sortable, von dem das Item kam.
    • placeholder
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das als Platzhalter verwendete Element darstellt.

Codebeispiel:

Initialisiere ein sortable mit dem angegebenen change-Callback:

$( ".selector" ).sortable({
change: function( event, ui ) {}
});
    

Binde einen Event-Listener an das sortchange-Event:

$( ".selector" ).on( "sortchange", function( event, ui ) {} );
    
create( event, ui ) sortcreate Wird ausgelöst, wenn das Droppable erstellt wird.
  • event
    Typ: Event
  • ui
    Typ: Object

Hinweis:uiDas Objekt ist leer; es ist zur Konsistenz mit anderen Ereignissen enthalten.

Codebeispiel:

Initialisiere ein sortable mit dem angegebenen create-Callback:

$( ".selector" ).sortable({
create: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das sortcreate-Ereignis:

$( ".selector" ).on( "sortcreate", function( event, ui ) {} );
    
deactivate( event, ui ) sortdeactivate Wird ausgelöst, wenn das Sortieren stoppt, und dieses Ereignis wird an alle möglichen verbundenen Listen weitergegeben.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das den sortierten Helper repräsentiert.
    • item
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das aktuell gezogene Element repräsentiert.
    • offset
      Typ: Object
      Beschreibung: Aktuelle absolute Position des Helpers, dargestellt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Aktuelle Position des Helpers, dargestellt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Ursprüngliche Position des Elements, dargestellt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem sortable zu einem anderen verschoben, das sortable, von dem das Item kam.
    • placeholder
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das als Platzhalter verwendete Element darstellt.

Codebeispiel:

Initialisieren Sie ein sortable mit dem angegebenen deactivate-Callback:

$( ".selector" ).sortable({
deactivate: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das sortdeactivate-Ereignis:

$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );
    
out( event, ui ) sortout Wird ausgelöst, wenn ein sortierbares Element aus einer sortierbaren Liste entfernt wird.

Hinweis: Dieses Ereignis wird auch ausgelöst, wenn ein sortierbares Element abgebrochen wird.

  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das den sortierten Helper repräsentiert.
    • item
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das aktuell gezogene Element repräsentiert.
    • offset
      Typ: Object
      Beschreibung: Aktuelle absolute Position des Helpers, dargestellt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Aktuelle Position des Helpers, dargestellt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Ursprüngliche Position des Elements, dargestellt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem sortable zu einem anderen verschoben, das sortable, von dem das Item kam.
    • placeholder
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das als Platzhalter verwendete Element darstellt.

Codebeispiel:

Initialisieren Sie ein sortable mit dem angegebenen out-Callback:

$( ".selector" ).sortable({
out: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das sortout-Ereignis:

$( ".selector" ).on( "sortout", function( event, ui ) {} );
    
over( event, ui ) sortover Wird ausgelöst, wenn ein sortierbares Element in eine sortierbare Liste verschoben wird.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das den sortierten Helper repräsentiert.
    • item
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das aktuell gezogene Element repräsentiert.
    • offset
      Typ: Object
      Beschreibung: Aktuelle absolute Position des Helpers, dargestellt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Aktuelle Position des Helpers, dargestellt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Ursprüngliche Position des Elements, dargestellt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem sortable zu einem anderen verschoben, das sortable, von dem das Item kam.
    • placeholder
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das als Platzhalter verwendete Element darstellt.

Codebeispiel:

Initialisieren Sie ein Sortable mit dem angegebenen over-Callback:

$( ".selector" ).sortable({
out: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das sortover-Ereignis:

$( ".selector" ).on( "sortout", function( event, ui ) {} );
    
receive( event, ui ) sortreceive Wird ausgelöst, wenn ein Element aus einer verbundenen sortierbaren Liste in eine andere Liste platziert wird. Letztere ist das Ereignisziel.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das den sortierten Helper repräsentiert.
    • item
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das aktuell gezogene Element repräsentiert.
    • offset
      Typ: Object
      Beschreibung: Aktuelle absolute Position des Helpers, dargestellt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Aktuelle Position des Helpers, dargestellt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Ursprüngliche Position des Elements, dargestellt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem sortable zu einem anderen verschoben, das sortable, von dem das Item kam.
    • placeholder
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das als Platzhalter verwendete Element darstellt.

Codebeispiel:

Initialisieren Sie ein Sortable mit dem angegebenen receive-Callback:

$( ".selector" ).sortable({
receive: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das sortreceive-Ereignis:

$( ".selector" ).on( "sortreceive", function( event, ui ) {} );
    
remove( event, ui ) sortremove Wird ausgelöst, wenn ein Element aus einer verbundenen sortierbaren Liste in eine andere Liste platziert wird. Erstere ist das Ereignisziel.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das den sortierten Helper repräsentiert.
    • item
      Typ: jQuery
      Beschreibung: jQuery-Objekt, das das aktuell gezogene Element repräsentiert.
    • offset
      Typ: Object
      Beschreibung: Aktuelle absolute Position des Helpers, dargestellt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Die aktuelle Position des Helpers, ausgedrückt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Die ursprüngliche Position des Elements, ausgedrückt als{ top, left }。
    • placeholder
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das als Platzhalter verwendet wird.

Codebeispiel:

Initialisieren Sie ein Sortable mit dem angegebenen remove-Callback:

$( ".selector" ).sortable({
remove: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das sortremove-Ereignis:

$( ".selector" ).on( "sortremove", function( event, ui ) {} );
    
sort( event, ui ) sortieren Dieses Ereignis wird während des Sortierens ausgelöst.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das den Helper darstellt, der sortiert wird.
    • item
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das gerade gezogen wird.
    • offset
      Typ: Object
      Beschreibung: Die aktuelle absolute Position des Helpers, ausgedrückt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Die aktuelle Position des Helpers, ausgedrückt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Die ursprüngliche Position des Elements, ausgedrückt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem Sortable zu einem anderen verschoben wird, das Sortable, von dem das Element stammt.
    • placeholder
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das als Platzhalter verwendet wird.

Codebeispiel:

Initialisieren Sie ein Sortable mit dem angegebenen sort-Callback:

$( ".selector" ).sortable({
sort: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das sort-Ereignis:

$( ".selector" ).on( "sort", function( event, ui ) {} );
    
start( event, ui ) sortstart Dieses Ereignis wird ausgelöst, wenn das Sortieren beginnt.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das den Helper darstellt, der sortiert wird.
    • item
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das gerade gezogen wird.
    • offset
      Typ: Object
      Beschreibung: Die aktuelle absolute Position des Helpers, ausgedrückt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Die aktuelle Position des Helpers, ausgedrückt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Die ursprüngliche Position des Elements, ausgedrückt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem Sortable zu einem anderen verschoben wird, das Sortable, von dem das Element stammt.
    • placeholder
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das als Platzhalter verwendet wird.

Codebeispiel:

Initialisieren Sie ein sortierbares Element mit dem angegebenen Start-Callback:

$( ".selector" ).sortable({
start: function( event, ui ) {}
});
    

Binden Sie einen Ereignis-Listener an das sortstart-Ereignis:

$( ".selector" ).on( "sortstart", function( event, ui ) {} );
    
stop( event, ui ) sortstop Dieses Ereignis wird ausgelöst, wenn das Sortieren beendet wird.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das den Helper darstellt, der sortiert wird.
    • item
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das gerade gezogen wird.
    • offset
      Typ: Object
      Beschreibung: Die aktuelle absolute Position des Helpers, ausgedrückt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Die aktuelle Position des Helpers, ausgedrückt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Die ursprüngliche Position des Elements, ausgedrückt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem Sortable zu einem anderen verschoben wird, das Sortable, von dem das Element stammt.
    • placeholder
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das als Platzhalter verwendet wird.

Codebeispiel:

Initialisieren Sie ein sortierbares Element mit dem angegebenen Stop-Callback:

$( ".selector" ).sortable({
stop: function( event, ui ) {}
});
    

Binden Sie einen Ereignis-Listener an das sortstop-Ereignis:

$( ".selector" ).on( "sortstop", function( event, ui ) {} );
    
update( event, ui ) sortupdate Dieses Ereignis wird ausgelöst, wenn der Benutzer das Sortieren beendet und sich die DOM-Position geändert hat.
  • event
    Typ: Event
  • ui
    Typ: Object
    • helper
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das den Helper darstellt, der sortiert wird.
    • item
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das gerade gezogen wird.
    • offset
      Typ: Object
      Beschreibung: Die aktuelle absolute Position des Helpers, ausgedrückt als{ top, left }。
    • position
      Typ: Object
      Beschreibung: Die aktuelle Position des Helpers, ausgedrückt als{ top, left }。
    • originalPosition
      Typ: Object
      Beschreibung: Die ursprüngliche Position des Elements, ausgedrückt als{ top, left }。
    • sender
      Typ: jQuery
      Beschreibung: Wenn von einem Sortable zu einem anderen verschoben wird, das Sortable, von dem das Element stammt.
    • placeholder
      Typ: jQuery
      Beschreibung: Ein jQuery-Objekt, das das Element darstellt, das als Platzhalter verwendet wird.

Codebeispiel:

Initialisieren Sie ein sortierbares Element mit dem angegebenen Update-Callback:

$( ".selector" ).sortable({
update: function( event, ui ) {}
});
    

Binden Sie einen Ereignis-Listener an das sortupdate-Ereignis:

$( ".selector" ).on( "sortupdate", function( event, ui ) {} );
    

Beispiele

Ein einfaches jQuery UI Sortable-Widget.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可排序小部件（Sortable Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
 
<script>$("#sortable").sortable();</script>
 
</body>
</html>

Andere Erweiterungen