jQuery UI API - Widget Sortable

Catégorie

Interactions

Utilisation

Description :Utilisez la souris pour ajuster l'ordre des éléments dans une liste ou une grille.

添加于版本:1.0

Dépendances :

Remarques :Le plugin Sortable de jQuery UI rend les éléments sélectionnés triables en les faisant glisser avec la souris.

Remarques :Pour trier les lignes d'un tableau,tbodydoit être triable, pastable。

Navigation rapide

Options Méthodes Événements

Options Type Description Valeur par défaut
appendTo jQuery ou Element ou Selector ou String Lors du glissement, l'endroit où l'assistant déplacé par la souris doit être rattaché (par exemple, pour résoudre les problèmes de chevauchement/zIndex).

Prend en charge plusieurs types :

  • jQuery: un objet jQuery contenant l'élément auquel l'assistant doit être rattaché.
  • Element: l'élément auquel l'assistant doit être rattaché.
  • Selector: un sélecteur spécifiant quel élément doit recevoir l'assistant.
  • String: String"parent"Fera de l'assistant un frère des éléments triables.

Exemples de code :

Initialiser le triable avec ce qui est spécifiéappendTooption:

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

Après l'initialisation, obtenir ou définir l'appendTooption:

// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
 
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
    
 "parent"
axis String Si défini, les éléments ne peuvent être déplacés que horizontalement ou verticalement. Valeurs possibles :"x", "y"。

Exemples de code :

Initialiser le triable avec ce qui est spécifiéaxisoption:

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

Après l'initialisation, obtenir ou définir l'axisoption:

// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
 
// setter
$( ".selector" ).sortable( "option", "axis", "x" );
    
 false
annulation Sélecteur Empêche le tri de démarrer sur les éléments correspondant au sélecteur.

Exemples de code :

Initialiser le triable avec ce qui est spécifiécanceloption:

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

Après l'initialisation, obtenir ou définir l'canceloption:

// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
 
// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
    
 "input, textarea, button, select, option"
connectWith Sélecteur Sélecteur d'autres éléments triables auxquels les éléments de cette liste doivent être connectés. Il s'agit d'une relation unidirectionnelle, et si vous voulez que les éléments soient connectés dans les deux sens, vous devez définir l'connectWithoption sur les deux éléments triables.

Exemples de code :

Initialiser le triable avec ce qui est spécifiéconnectWithoption:

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

Après l'initialisation, obtenir ou définir l'connectWithoption:

// getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
 
// setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
    
 false
containment Élément ou sélecteur ou chaîne Définit les limites dans lesquelles les éléments triables sont contraints pendant le déplacement.

Remarque : L'élément spécifié pour containment doit avoir une largeur et une hauteur calculées (bien qu'elles n'aient pas besoin d'être explicites). Par exemple, si vous avezfloat: leftdes enfants triables et spécifiezcontainment: "parent", assurez-vous d'avoir sur le conteneur triable/parentfloat: left, sinon il auraheight: 0, ce qui entraîne un comportement indéfini.

Prend en charge plusieurs types :

  • Élément: Un élément à utiliser comme conteneur.
  • Selector: un sélecteur spécifiant un élément à utiliser comme conteneur.
  • String: une chaîne identifiant un élément à utiliser comme conteneur. Valeurs possibles :"parent"、"document"、"window"。

Exemples de code :

Initialiser le triable avec ce qui est spécifiécontainmentoption:

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

Après l'initialisation, obtenir ou définir l'containmentoption:

// getter
var containment = $( ".selector" ).sortable( "option", "containment" );
 
// setter
$( ".selector" ).sortable( "option", "containment", "parent" );
    
 false
cursor String Définit le curseur qui est affiché lors du tri.

Exemples de code :

Initialiser le triable avec ce qui est spécifiécursoroption:

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

Après l'initialisation, obtenir ou définir l'cursoroption:

// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
 
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );
    
 "auto"
cursorAt Object Déplace l'élément trié ou l'assistant afin que le curseur semble toujours glisser depuis la même position. Les coordonnées peuvent être données sous forme de hachage à l'aide d'une ou deux clés :{ top, left, right, bottom }。

Exemples de code :

Initialiser le triable avec ce qui est spécifiécursorAtoption:

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

Après l'initialisation, obtenir ou définir l'cursorAtoption:

// getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
 
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );
    
 false
delay Integer Durée en millisecondes après mousedown avant le début du tri. Cette option peut empêcher un glissement indésirable lors d'un clic sur un élément.

Exemples de code :

Initialiser le triable avec ce qui est spécifiédelayoption:

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

Après l'initialisation, obtenir ou définir l'delayoption:

// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
 
// setter
$( ".selector" ).sortable( "option", "delay", 150 );
    
 0
disabled Boolean Si défini surtrue, désactive le sortable.

Exemples de code :

Initialiser le triable avec ce qui est spécifiédisabledoption:

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

Après l'initialisation, obtenir ou définir l'disabledoption:

// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
 
// setter
$( ".selector" ).sortable( "option", "disabled", true );
    
 false
distance Number Distance en pixels dont la souris doit se déplacer après mousedown avant le début du tri. Si spécifiée, le tri ne commencera que lorsque la souris sera déplacée au-delà de la distance spécifiée. Cette option peut être utilisée pour autoriser les clics sur les éléments à l'intérieur d'une poignée.

Exemples de code :

Initialiser le triable avec ce qui est spécifiédistanceoption:

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

Après l'initialisation, obtenir ou définir l'distanceoption:

// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
 
// setter
$( ".selector" ).sortable( "option", "distance", 5 );
    
 1
dropOnEmpty Boolean Si défini surfalse, les éléments de ce sortable ne peuvent pas être déposés sur un sortable connecté vide (voir laconnectWithoption).

Exemples de code :

Initialiser le triable avec ce qui est spécifiédropOnEmptyoption:

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

Après l'initialisation, obtenir ou définir l'dropOnEmptyoption:

// getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
 
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );
    
 vrai
forceHelperSize Boolean Si défini surtrue, force l'assistant à avoir une taille.

Exemples de code :

Initialiser le triable avec ce qui est spécifiéforceHelperSizeoption:

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

Après l'initialisation, obtenir ou définir l'forceHelperSizeoption:

// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
 
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
    
 false
forcePlaceholderSize Boolean Si défini surtrue, force le placeholder à avoir une taille.

Exemples de code :

Initialiser le triable avec ce qui est spécifiéforcePlaceholderSizeoption:

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

Après l'initialisation, obtenir ou définir l'forcePlaceholderSizeoption:

// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
 
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
    
 false
grid Tableau Accroche l'élément trié ou l'assistant à une grille, tous les x et y pixels. Le tableau doit être sous la forme[ x, y ]。

Exemples de code :

Initialiser le triable avec ce qui est spécifiégridoption:

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

Après l'initialisation, obtenir ou définir l'gridoption:

// getter
var grid = $( ".selector" ).sortable( "option", "grid" );
 
// setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );
    
 false
handle Sélecteur ou Element Si spécifié, limite le début du tri à l'élément spécifié.

Exemples de code :

Initialiser le triable avec ce qui est spécifiéhandleoption:

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

Après l'initialisation, obtenir ou définir l'handleoption:

// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
 
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );
    
 false
helper String ou Function() Permet d'utiliser un élément d'aide pour l'affichage pendant le glissement.

Prend en charge plusieurs types :

  • String: Si défini sur"clone", l'élément sera cloné, et le clone sera glissé.
  • Fonction: Une fonction qui renverra un DOMElement à utiliser lors du glissement. La fonction reçoit l'événement et l'élément en cours de tri.

Exemples de code :

Initialiser le triable avec ce qui est spécifiéhelperoption:

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

Après l'initialisation, obtenir ou définir l'helperoption:

// getter
var helper = $( ".selector" ).sortable( "option", "helper" );
 
// setter
$( ".selector" ).sortable( "option", "helper", "clone" );
    
 "original"
items Sélecteur Quels éléments contenus dans l'élément doivent être triables.

Exemples de code :

Initialiser le triable avec ce qui est spécifiéitemsoption:

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

Après l'initialisation, obtenir ou définir l'itemsoption:

// getter
var items = $( ".selector" ).sortable( "option", "items" );
 
// setter
$( ".selector" ).sortable( "option", "items", "> li" );
    
 "> *"
opacity Number L'opacité de l'élément d'aide lors du tri. De0.01à1。

Exemples de code :

Initialiser le triable avec ce qui est spécifiéopacityoption:

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

Après l'initialisation, obtenir ou définir l'opacityoption:

// getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
 
// setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );
    
 false
placeholder String Le nom de classe à appliquer, sinon blanc.

Exemple de code :

Initialiser avec lesplaceholderoptions pour le sortable :

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

Après l'initialisation, obtenir ou définirplaceholderoption:

// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
 
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );
    
 false
revert Booléen ou Nombre Indique si les éléments triables utilisent une animation fluide pour revenir à leur nouvelle position.

Prend en charge plusieurs types :

  • BooléenLorsqu'il est défini surtrue, l'élément utilisera une animation avec la durée par défaut.
  • Nombre: La durée de l'animation, en millisecondes.

Exemple de code :

Initialiser avec lesrevertoptions pour le sortable :

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

Après l'initialisation, obtenir ou définirrevertoption:

// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
 
// setter
$( ".selector" ).sortable( "option", "revert", true );
    
 false
scroll Boolean Si défini surtrue, la page défilera lorsque le bord est atteint.

Exemple de code :

Initialiser avec lesscrolloptions pour le sortable :

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

Après l'initialisation, obtenir ou définirscrolloption:

// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
 
// setter
$( ".selector" ).sortable( "option", "scroll", false );
    
 vrai
scrollSensitivity Number Définit à quelle distance du bord la souris doit se trouver pour que le défilement commence.

Exemple de code :

Initialiser avec lesscrollSensitivityoptions pour le sortable :

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

Après l'initialisation, obtenir ou définirscrollSensitivityoption:

// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );
    
 20
scrollSpeed Number Lorsque le pointeur de la souris se trouve à moins descrollSensitivitydistance, la vitesse à laquelle la fenêtre défile. Siscrolloption estfalsealors il est ignoré.

Exemple de code :

Initialiser avec lesscrollSpeedoptions pour le sortable :

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

Après l'initialisation, obtenir ou définirscrollSpeedoption:

// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
    
 20
tolerance String Spécifie le mode utilisé pour tester si un élément en déplacement chevauche un autre élément. Valeurs possibles :
  • "intersect": L'élément chevauche l'autre élément d'au moins 50%.
  • "pointer": Le pointeur de la souris chevauche l'autre élément.

Exemple de code :

Initialiser avec lestoleranceoptions pour le sortable :

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

Après l'initialisation, obtenir ou définirtoleranceoption:

// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
 
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );
    
 "intersect"
zIndex Integer Le Z-index de l'élément/helper pendant le tri.

Exemple de code :

Initialiser avec leszIndexoptions pour le sortable :

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

Après l'initialisation, obtenir ou définirzIndexoption:

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

Méthodes Renvoie Description
cancel() jQuery (plugin uniquement) Annule une modification dans le sortable actuel pendant le tri en cours et restaure l'état précédent. Utile dans les callbacks stop et receive.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appel de la méthode cancel :

$( ".selector" ).sortable( "cancel" );
    
destroy() jQuery (plugin uniquement) Supprime complètement la fonctionnalité sortable. Cela renvoie l'élément à son état d'avant initialisation.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appel de la méthode destroy :

$( ".selector" ).sortable( "destroy" );
    
disable() jQuery (plugin uniquement) Désactiver le sortable.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appel de la méthode disable :

$( ".selector" ).sortable( "disable" );
    
enable() jQuery (plugin uniquement) Activer le sortable.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appel de la méthode enable :

$( ".selector" ).sortable( "enable" );
    
option( optionName ) Object Obtient la valeur actuellement associée au nom d'option spécifiéoptionName.
  • optionName
    Type : String
    Description : Le nom de l'option à obtenir.

Exemple de code :

Appel de cette méthode :

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
    
option() PlainObject Récupérer un objet contenant des paires clé/valeur qui représentent le hash d'options draggable actuel.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appel de cette méthode :

var options = $( ".selector" ).sortable( "option" );
    
option( optionName, value ) jQuery (plugin uniquement) Définir la valeur de l'option sortable associée au paramètre spécifiéoptionName.
  • optionName
    Type : String
    Description : Le nom de l'option à définir.
  • value
    Type : Object
    Description : La valeur à définir pour l'option.

Exemple de code :

Appel de cette méthode :

$( ".selector" ).sortable( "option", "disabled", true );
    
option( options ) jQuery (plugin uniquement) Définir une ou plusieurs options pour le sortable.
  • options
    Type : Object
    Description : Les paires option-valeur à définir.

Exemple de code :

Appel de cette méthode :

$( ".selector" ).sortable( "option", { disabled: true } );
    
refresh() jQuery (plugin uniquement) Rafraîchir les éléments sortable. Déclenche un rechargement de tous les éléments sortable, ce qui permet de reconnaître les nouveaux éléments.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appel de la méthode refresh :

$( ".selector" ).sortable( "refresh" );
    
refreshPositions() jQuery (plugin uniquement) Rafraîchit les positions en cache des éléments triables. L'appel de cette méthode rafraîchit les positions en cache de tous les éléments triables.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appel de la méthode refreshPositions :

$( ".selector" ).sortable( "refreshPositions" );
    
serialize( options ) String Sérialiser les éléments triablesiden une chaîne soumettable par formulaire/ajax. L'appel de cette méthode produit un hash qui peut être ajouté à n'importe quelle url afin de soumettre facilement un nouvel ordre des éléments au serveur.

Par défaut, il fonctionne via l'attribut de chaqueidélément, avec le format"setname_number", et il produit un hash de la forme"setname[]=number&setname[]=number".

Remarque : Si la sérialisation renvoie une chaîne vide, assurez-vous queidl'attribut contient un underscore (_). Le format doit être"set_number". Par exemple, unidattribut de"foo_1"、"foo_5"、"foo_2"avec 3 éléments se sérialisera comme"foo[]=1&foo[]=5&foo[]=2". Vous pouvez utiliser des traits de soulignement (_), des signes égal (=) ou des traits d'union (-) pour séparer l'ensemble et le nombre. Par exemple,"foo=1"、"foo-1"、"foo_1"se sérialisent tous en"foo[]=1"。

  • options
    Type : Object
    Options pour personnaliser la sérialisation.
    • clé(Par défaut :The part before the delimiter in the attribute）
      Type : String
      Description : Remplacerpart1[]par la valeur spécifiée.
    • attribut(Par défaut :"id"）
      Type : String
      Description : Le nom d'attribut à utiliser pour la valeur.
    • expression(Par défaut :/(.+)[-=_](.+)/）
      Type : RegExp
      Description : Une expression régulière pour séparer la valeur d'attribut en une clé et une valeur.

Exemple de code :

Appel de la méthode serialize :

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
    
toArray( options ) Tableau Sérialiser les éléments triablesiddans un tableau de chaînes de caractères.
  • options
    Type : Object
    Options pour personnaliser la sérialisation.
    • attribut(Par défaut :"id"）
      Type : String
      Description : Le nom d'attribut à utiliser pour la valeur.

Exemple de code :

Appel de la méthode toArray :

var sortedIDs = $( ".selector" ).sortable( "toArray" );
    
widget() jQuery Renvoie unjQueryobjet contenant les éléments triables.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appel de la méthode widget :

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

Événements Type Description
activate( event, ui ) sortactivate Cet événement est déclenché lors de l'utilisation de listes connectées ; chaque liste connectée le reçoit au début du glissement.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : objet jQuery représentant le helper en cours de tri.
    • item
      Type : jQuery
      Description : objet jQuery représentant l'élément actuellement glissé.
    • offset
      Type : Object
      Description : la position absolue actuelle du helper, représentée sous la forme{ top, left }。
    • position
      Type : Object
      Description : la position actuelle du helper, représentée sous la forme{ top, left }。
    • originalPosition
      Type : Object
      Description : La position d'origine de l'élément, représentée sous la forme{ top, left }。
    • sender
      Type : jQuery
      Description : Si l'élément est déplacé d'un sortable à un autre, le sortable d'où provient l'élément.
    • placeholder
      Type : jQuery
      Description : objet jQuery représentant l'élément utilisé comme placeholder.

Exemple de code :

Initialiser le sortable avec la fonction de rappel activate spécifiée :

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

Lier un écouteur d'événement à l'événement sortactivate :

$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
    
beforeStop( event, ui ) sortbeforestop Cet événement est déclenché lorsque le tri s'arrête, sauf lorsque le placeholder/helper est encore disponible.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : objet jQuery représentant le helper trié.
    • item
      Type : jQuery
      Description : objet jQuery représentant l'élément actuellement glissé.
    • offset
      Type : Object
      Description : position absolue actuelle du helper, représentée sous la forme{ top, left }。
    • position
      Type : Object
      Description : Position actuelle du helper, représentée sous la forme de{ top, left }。
    • originalPosition
      Type : Object
      Description : Position d'origine de l'élément, représentée sous la forme de{ top, left }。
    • sender
      Type : jQuery
      Description : Si déplacé d'un sortable à un autre, le sortable duquel l'élément provient.
    • placeholder
      Type : jQuery
      Description : Objet jQuery représentant l'élément utilisé comme placeholder.

Exemple de code :

Initialiser un sortable avec la fonction de rappel beforeStop spécifiée :

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

Lier un écouteur d'événement à l'événement sortbeforestop :

$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );
    
change( event, ui ) sortchange Déclenché pendant le tri, sauf lorsque la position DOM change.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : objet jQuery représentant le helper trié.
    • item
      Type : jQuery
      Description : objet jQuery représentant l'élément actuellement glissé.
    • offset
      Type : Object
      Description : position absolue actuelle du helper, représentée sous la forme{ top, left }。
    • position
      Type : Object
      Description : Position actuelle du helper, représentée sous la forme de{ top, left }。
    • originalPosition
      Type : Object
      Description : Position d'origine de l'élément, représentée sous la forme de{ top, left }。
    • sender
      Type : jQuery
      Description : Si déplacé d'un sortable à un autre, le sortable duquel l'élément provient.
    • placeholder
      Type : jQuery
      Description : Objet jQuery représentant l'élément utilisé comme placeholder.

Exemple de code :

Initialiser un sortable avec la fonction de rappel change spécifiée :

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

Lier un écouteur d'événement à l'événement sortchange :

$( ".selector" ).on( "sortchange", function( event, ui ) {} );
    
create( event, ui ) sortcreate Déclenché lorsque le droppable est créé.
  • event
    Type : Event
  • ui
    Type : Object

Remarque :uiL'objet est vide ; il est inclus pour assurer la cohérence avec les autres événements.

Exemple de code :

Initialiser un sortable avec la fonction de rappel create spécifiée :

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

Lier un écouteur d'événement à l'événement sortcreate :

$( ".selector" ).on( "sortcreate", function( event, ui ) {} );
    
deactivate( event, ui ) sortdeactivate Déclenché lorsque le tri s'arrête, et cet événement se propage à toutes les listes connectées possibles.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : objet jQuery représentant le helper trié.
    • item
      Type : jQuery
      Description : objet jQuery représentant l'élément actuellement glissé.
    • offset
      Type : Object
      Description : position absolue actuelle du helper, représentée sous la forme{ top, left }。
    • position
      Type : Object
      Description : Position actuelle du helper, représentée sous la forme de{ top, left }。
    • originalPosition
      Type : Object
      Description : Position d'origine de l'élément, représentée sous la forme de{ top, left }。
    • sender
      Type : jQuery
      Description : Si déplacé d'un sortable à un autre, le sortable duquel l'élément provient.
    • placeholder
      Type : jQuery
      Description : Objet jQuery représentant l'élément utilisé comme placeholder.

Exemple de code :

Initialiser un élément triable avec le rappel deactivate spécifié :

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

Lier un écouteur d'événement à l'événement sortdeactivate :

$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );
    
out( event, ui ) sortout Déclenché lorsqu'un élément triable est retiré d'une liste triable.

Remarque : cet événement est également déclenché lorsqu'un élément triable est annulé.

  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : objet jQuery représentant le helper trié.
    • item
      Type : jQuery
      Description : objet jQuery représentant l'élément actuellement glissé.
    • offset
      Type : Object
      Description : position absolue actuelle du helper, représentée sous la forme{ top, left }。
    • position
      Type : Object
      Description : Position actuelle du helper, représentée sous la forme de{ top, left }。
    • originalPosition
      Type : Object
      Description : Position d'origine de l'élément, représentée sous la forme de{ top, left }。
    • sender
      Type : jQuery
      Description : Si déplacé d'un sortable à un autre, le sortable duquel l'élément provient.
    • placeholder
      Type : jQuery
      Description : Objet jQuery représentant l'élément utilisé comme placeholder.

Exemple de code :

Initialiser un élément triable avec le rappel out spécifié :

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

Lier un écouteur d'événement à l'événement sortout :

$( ".selector" ).on( "sortout", function( event, ui ) {} );
    
over( event, ui ) sortover Déclenché lorsqu'un élément triable se déplace vers une liste triable.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : objet jQuery représentant le helper trié.
    • item
      Type : jQuery
      Description : objet jQuery représentant l'élément actuellement glissé.
    • offset
      Type : Object
      Description : position absolue actuelle du helper, représentée sous la forme{ top, left }。
    • position
      Type : Object
      Description : Position actuelle du helper, représentée sous la forme de{ top, left }。
    • originalPosition
      Type : Object
      Description : Position d'origine de l'élément, représentée sous la forme de{ top, left }。
    • sender
      Type : jQuery
      Description : Si déplacé d'un sortable à un autre, le sortable duquel l'élément provient.
    • placeholder
      Type : jQuery
      Description : Objet jQuery représentant l'élément utilisé comme placeholder.

Exemple de code :

Initialiser un sortable avec le callback over spécifié :

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

Lier un écouteur d'événement à l'événement sortover :

$( ".selector" ).on( "sortout", function( event, ui ) {} );
    
receive( event, ui ) sortreceive Déclenché lorsqu'un élément d'une liste sortable connectée est placé dans une autre liste. Cette dernière est la cible de l'événement.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : objet jQuery représentant le helper trié.
    • item
      Type : jQuery
      Description : objet jQuery représentant l'élément actuellement glissé.
    • offset
      Type : Object
      Description : position absolue actuelle du helper, représentée sous la forme{ top, left }。
    • position
      Type : Object
      Description : Position actuelle du helper, représentée sous la forme de{ top, left }。
    • originalPosition
      Type : Object
      Description : Position d'origine de l'élément, représentée sous la forme de{ top, left }。
    • sender
      Type : jQuery
      Description : Si déplacé d'un sortable à un autre, le sortable duquel l'élément provient.
    • placeholder
      Type : jQuery
      Description : Objet jQuery représentant l'élément utilisé comme placeholder.

Exemple de code :

Initialiser un sortable avec le callback receive spécifié :

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

Lier un écouteur d'événement à l'événement sortreceive :

$( ".selector" ).on( "sortreceive", function( event, ui ) {} );
    
remove( event, ui ) sortremove Déclenché lorsqu'un élément d'une liste sortable connectée est placé dans une autre liste. La première est la cible de l'événement.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : objet jQuery représentant le helper trié.
    • item
      Type : jQuery
      Description : objet jQuery représentant l'élément actuellement glissé.
    • offset
      Type : Object
      Description : position absolue actuelle du helper, représentée sous la forme{ top, left }。
    • position
      Type : Object
      Description : La position actuelle du helper, exprimée sous la forme{ top, left }。
    • originalPosition
      Type : Object
      Description : La position d'origine de l'élément, exprimée sous la forme{ top, left }。
    • placeholder
      Type : jQuery
      Description : Un objet jQuery représentant l'élément utilisé comme espace réservé.

Exemple de code :

Initialiser un sortable avec le rappel remove spécifié :

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

Lier un écouteur d'événement à l'événement sortremove :

$( ".selector" ).on( "sortremove", function( event, ui ) {} );
    
sort( event, ui ) trier Cet événement est déclenché pendant le tri.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : Un objet jQuery représentant le helper en cours de tri.
    • item
      Type : jQuery
      Description : Un objet jQuery représentant l'élément en cours de glissement.
    • offset
      Type : Object
      Description : La position absolue actuelle du helper, exprimée comme{ top, left }。
    • position
      Type : Object
      Description : La position actuelle du helper, exprimée sous la forme{ top, left }。
    • originalPosition
      Type : Object
      Description : La position d'origine de l'élément, exprimée sous la forme{ top, left }。
    • sender
      Type : jQuery
      Description : Si l'on passe d'un sortable à un autre, le sortable d'où provient l'élément.
    • placeholder
      Type : jQuery
      Description : Un objet jQuery représentant l'élément utilisé comme espace réservé.

Exemple de code :

Initialiser un sortable avec le rappel sort spécifié :

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

Lier un écouteur d'événement à l'événement sort :

$( ".selector" ).on( "sort", function( event, ui ) {} );
    
start( event, ui ) sortstart Cet événement est déclenché lorsque le tri commence.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : Un objet jQuery représentant le helper en cours de tri.
    • item
      Type : jQuery
      Description : Un objet jQuery représentant l'élément en cours de glissement.
    • offset
      Type : Object
      Description : La position absolue actuelle du helper, exprimée comme{ top, left }。
    • position
      Type : Object
      Description : La position actuelle du helper, exprimée sous la forme{ top, left }。
    • originalPosition
      Type : Object
      Description : La position d'origine de l'élément, exprimée sous la forme{ top, left }。
    • sender
      Type : jQuery
      Description : Si l'on passe d'un sortable à un autre, le sortable d'où provient l'élément.
    • placeholder
      Type : jQuery
      Description : Un objet jQuery représentant l'élément utilisé comme espace réservé.

Exemple de code :

Initialisez un sortable avec la fonction de rappel start spécifiée :

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

Liez un écouteur d'événement à l'événement sortstart :

$( ".selector" ).on( "sortstart", function( event, ui ) {} );
    
stop( event, ui ) sortstop Cet événement est déclenché lorsque le tri s'arrête.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : Un objet jQuery représentant le helper en cours de tri.
    • item
      Type : jQuery
      Description : Un objet jQuery représentant l'élément en cours de glissement.
    • offset
      Type : Object
      Description : La position absolue actuelle du helper, exprimée comme{ top, left }。
    • position
      Type : Object
      Description : La position actuelle du helper, exprimée sous la forme{ top, left }。
    • originalPosition
      Type : Object
      Description : La position d'origine de l'élément, exprimée sous la forme{ top, left }。
    • sender
      Type : jQuery
      Description : Si l'on passe d'un sortable à un autre, le sortable d'où provient l'élément.
    • placeholder
      Type : jQuery
      Description : Un objet jQuery représentant l'élément utilisé comme espace réservé.

Exemple de code :

Initialisez un sortable avec la fonction de rappel stop spécifiée :

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

Liez un écouteur d'événement à l'événement sortstop :

$( ".selector" ).on( "sortstop", function( event, ui ) {} );
    
update( event, ui ) sortupdate Cet événement est déclenché lorsque l'utilisateur arrête le tri et que la position dans le DOM a changé.
  • event
    Type : Event
  • ui
    Type : Object
    • helper
      Type : jQuery
      Description : Un objet jQuery représentant le helper en cours de tri.
    • item
      Type : jQuery
      Description : Un objet jQuery représentant l'élément en cours de glissement.
    • offset
      Type : Object
      Description : La position absolue actuelle du helper, exprimée comme{ top, left }。
    • position
      Type : Object
      Description : La position actuelle du helper, exprimée sous la forme{ top, left }。
    • originalPosition
      Type : Object
      Description : La position d'origine de l'élément, exprimée sous la forme{ top, left }。
    • sender
      Type : jQuery
      Description : Si l'on passe d'un sortable à un autre, le sortable d'où provient l'élément.
    • placeholder
      Type : jQuery
      Description : Un objet jQuery représentant l'élément utilisé comme espace réservé.

Exemple de code :

Initialisez un sortable avec la fonction de rappel update spécifiée :

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

Liez un écouteur d'événement à l'événement sortupdate :

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

Exemples

Un widget Sortable simple de jQuery UI.

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

Autres extensions