JqueryUI - triable

jQueryUI fournit sortable()pour réorganiser les éléments dans une liste ou une grille à l'aide de la souris. Cette méthode effectue une action de tri sur la base d'une chaîne d'opération transmise comme premier paramètre.

Syntaxe

le sortable () La méthode peut être utilisée sous deux formes -

  • $ (selector, context) .sortable (options), méthode

  • $ (selector, context) .sortable ("action", [params]), méthode

$ (selector, context) .sortable (options), méthode

La méthode sortable (options) déclare qu'un élément HTML contient des éléments interchangeables. Le paramètre options est un objet qui spécifie le comportement des éléments impliqués lors de la réorganisation.

Syntaxe

$(selector, context).sortable(options);

Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -

Sr.No. Option et description
1 ajouter à

Cette option spécifie l'élément dans lequel le nouvel élément créé avec options.helper sera inséré pendant le temps du déplacement / glissement. Par défaut, sa valeur estparent.

Option - appendTo

Cette option spécifie l'élément dans lequel le nouvel élément créé avec options.helper sera inséré pendant le temps du déplacement / glissement. Par défaut, sa valeur estparent.

Cela peut être de type -

  • Selector - Cela indique un sélecteur spécifiant à quel élément ajouter l'aide.

  • jQuery - Cela indique un objet jQuery contenant l'élément auquel ajouter l'assistant.

  • Element - Un élément du modèle d'objet de document (DOM) auquel ajouter l'assistant.

  • String - La chaîne "parent" fera que l'assistant sera un frère de l'élément triable.

Syntax

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

Cette option indique un axe de mouvement ("x" est horizontal, "y" est vertical). Par défaut, sa valeur estfalse.

Option - axis

Cette option indique un axe de mouvement ("x" est horizontal, "y" est vertical). Par défaut, sa valeur estfalse.

Syntax

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

Cette option est utilisée pour empêcher le tri des éléments en cliquant sur l'un des éléments du sélecteur. Par défaut, sa valeur est"input,textarea,button,select,option".

Option - cancel

Cette option est utilisée pour empêcher le tri des éléments en cliquant sur l'un des éléments du sélecteur. Par défaut, sa valeur est"input,textarea,button,select,option".

Syntax

$(".selector").sortable(
   { cancel: "a,button" }
);
4 se connecter avec

Cette option est un sélecteur qui identifie un autre élément triable qui peut accepter des éléments de ce triable. Cela permet aux éléments d'une liste d'être déplacés vers d'autres listes, une interaction utilisateur fréquente et utile. S'il est omis, aucun autre élément n'est connecté. C'est une relation à sens unique. Par défaut, sa valeur estfalse.

Option - connectWith

Cette option est un sélecteur qui identifie un autre élément triable qui peut accepter des éléments de ce triable. Cela permet aux éléments d'une liste d'être déplacés vers d'autres listes, une interaction utilisateur fréquente et utile. S'il est omis, aucun autre élément n'est connecté. C'est une relation à sens unique. Par défaut, sa valeur estfalse.

Syntax

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 endiguement

Cette option indique un élément dans lequel le déplacement a lieu. L'élément sera représenté par un sélecteur (seul le premier élément de la liste sera pris en compte), un élément DOM, ou la chaîne "parent" (élément parent) ou "window" (page HTML).

Option - containment

Cette option indique un élément dans lequel le déplacement a lieu.

Cela peut être de type -

  • Selector- Cela indique un sélecteur. L'élément sera représenté par un sélecteur (seul le premier élément de la liste sera pris en compte)

  • Element - Un élément DOM à utiliser comme conteneur.

  • String- La chaîne identifiant un élément à utiliser comme conteneur. Les valeurs possibles sont parent (élément parent), document ou window (page HTML).

Syntax

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

Spécifie la propriété CSS du curseur lorsque l'élément se déplace. Il représente la forme du pointeur de la souris. Par défaut, sa valeur est "auto".

Option - cursor

Spécifie la propriété CSS du curseur lorsque l'élément se déplace. Il représente la forme du pointeur de la souris. Par défaut, sa valeur est "auto". Les valeurs possibles sont -

  • "réticule" (en travers)
  • "default" (une flèche)
  • "pointeur" (main)
  • "déplacer" (deux flèches se croisent)
  • "e-resize" (développer vers la droite)
  • "ne-resize" (développer vers le haut à droite)
  • "nw-resize" (développer vers le haut à gauche)
  • "n-resize" (agrandir)
  • "se-resize" (développer vers le bas à droite)
  • "sw-resize" (développer en bas à gauche)
  • "s-resize" (développer vers le bas)
  • "auto" (par défaut)
  • "w-resize" (développer à gauche)
  • "text" (pointeur pour écrire du texte)
  • "attendez" (sablier)
  • "help" (pointeur d'aide)

Syntax

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

Définit le décalage de l'assistant de glissement par rapport au curseur de la souris. Les coordonnées peuvent être données sous forme de hachage en utilisant une combinaison d'une ou deux clés: {haut, gauche, droite, bas}. Par défaut, sa valeur est "false".

Option - cursorAt

Définit le décalage de l'assistant de glissement par rapport au curseur de la souris. Les coordonnées peuvent être données sous forme de hachage en utilisant une combinaison d'une ou deux clés: {haut, gauche, droite, bas}. Par défaut, sa valeur est "false".

Syntax

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

Délai, en millisecondes, après lequel le premier mouvement de la souris est pris en compte. Le déplacement peut commencer après cette heure. Par défaut, sa valeur est "0".

Option - delay

Délai, en millisecondes, après lequel le premier mouvement de la souris est pris en compte. Le déplacement peut commencer après cette heure. Par défaut, sa valeur est "0".

Syntax

$(".selector").sortable(
   { delay: 150 }
);
9 désactivée

Cette option, si elle est définie sur true , désactive la fonctionnalité triable. Par défaut, sa valeur estfalse.

Option - disabled

Cette option, si elle est définie sur true , désactive la fonctionnalité triable. Par défaut, sa valeur estfalse.

Syntax

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

Nombre de pixels que la souris doit être déplacée avant le début du tri. S'il est spécifié, le tri ne démarrera qu'après avoir déplacé la souris au-delà de la distance. Par défaut, sa valeur est "1".

Option - distance

Nombre de pixels que la souris doit être déplacée avant le début du tri. S'il est spécifié, le tri ne démarrera qu'après avoir déplacé la souris au-delà de la distance. Par défaut, sa valeur est "1".

Syntax

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

Cette option est définie sur false , alors les éléments de ce triable ne peuvent pas être déposés sur un lien triable vide. Par défaut, sa valeur esttrue.

Option - dropOnEmpty

Cette option est définie sur false , alors les éléments de ce triable ne peuvent pas être déposés sur un lien triable vide. Par défaut, sa valeur esttrue.

Syntax

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

Si cette option est définie sur true , l'assistant doit avoir une taille. Par défaut, sa valeur estfalse.

Option - forceHelperSize

Si cette option est définie sur true , l'assistant doit avoir une taille. Par défaut, sa valeur estfalse.

Syntax

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

Cette option, lorsqu'elle est définie sur true , prend en compte la taille de l'espace réservé lorsqu'un élément est déplacé. Cette option n'est utile que si options.placeholder est initialisé. Par défaut, sa valeur estfalse.

Option - forcePlaceholderSize

Cette option, lorsqu'elle est définie sur true , prend en compte la taille de l'espace réservé lorsqu'un élément est déplacé. Cette option n'est utile que si options.placeholder est initialisé. Par défaut, sa valeur estfalse.

Syntax

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

Cette option est un tableau [x, y] indiquant le nombre de pixels que l'élément de tri déplace horizontalement et verticalement lors du déplacement de la souris. Par défaut, sa valeur estfalse.

Option - grid

Cette option est un tableau [x, y] indiquant le nombre de pixels que l'élément de tri déplace horizontalement et verticalement lors du déplacement de la souris. Par défaut, sa valeur estfalse.

Syntax

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

Si spécifié, empêche le tri de démarrer à moins que la souris ne se produise sur le ou les éléments spécifiés. Par défaut, sa valeur estfalse.

Option - handle

Si spécifié, empêche le tri de démarrer à moins que la souris ne se produise sur le ou les éléments spécifiés. Par défaut, sa valeur estfalse.

Syntax

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

Permet d'utiliser un élément d'assistance pour faire glisser l'affichage. Par défaut, sa valeur estoriginal.

Option - helper

Permet d'utiliser un élément d'assistance pour faire glisser l'affichage. Par défaut, sa valeur estoriginal. Les valeurs possibles sont -

  • String - S'il est réglé sur "clone", alors l'élément sera cloné et le clone sera déplacé.

  • Function - Une fonction qui retournera un DOMElement à utiliser lors du glissement.

Syntax

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

Cette option spécifie les éléments à l'intérieur de l'élément DOM à trier. Par défaut, sa valeur est> *.

Option - items

Cette option spécifie les éléments à l'intérieur de l'élément DOM à trier. Par défaut, sa valeur est> *

Syntax

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

Cette option permet de définir l'opacité de l'assistant lors du tri. Par défaut, sa valeur estfalse.

Option - opacity

Cette option permet de définir l'opacité de l'assistant lors du tri. Par défaut, sa valeur estfalse.

Syntax

$(".selector").sortable(
   { opacity: 0.5 }
);
19 espace réservé

Cette option est utilisée pour le nom de classe qui est appliqué à l'espace blanc autrement. Par défaut, sa valeur est false.

Option - placeholder

Syntax

$(".selector").sortable(
   { addClasses: false }
);
20 revenir

Cette option décide si les éléments triables doivent revenir à leurs nouvelles positions en utilisant une animation fluide. Par défaut, sa valeur estfalse.

Option - revert

Cette option décide si les éléments triables doivent revenir à leurs nouvelles positions en utilisant une animation fluide. Par défaut, sa valeur estfalse.

Syntax

$(".selector").sortable(
   { revert: true }
);
21 faire défiler

Cette option est utilisée pour activer le défilement. Si la valeur est true, la page défile lorsqu'elle arrive à un bord. Par défaut, sa valeur esttrue.

Option - scroll

Cette option est utilisée pour activer le défilement. Si la valeur est true, la page défile lorsqu'elle arrive à un bord. Par défaut, sa valeur esttrue.

Syntax

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

Cette option indique combien de pixels la souris doit quitter la zone visible pour provoquer le défilement. Par défaut, sa valeur est20. Cette option est utilisée uniquement avec options.scroll définie sur true.

Option - scrollSensitivity

Cette option indique combien de pixels la souris doit quitter la zone visible pour provoquer le défilement. Par défaut, sa valeur est20. Cette option est utilisée uniquement avec options.scroll définie sur true.

Syntax

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23 vitesse de défilement

Cette option indique la vitesse de défilement de l'affichage une fois que le défilement commence. Par défaut, sa valeur est20.

Option - scrollSpeed

Cette option indique la vitesse de défilement de l'affichage une fois que le défilement commence. Par défaut, sa valeur est20.

Syntax

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24 tolérance

Cette option est une chaîne qui spécifie le mode à utiliser pour tester si l'élément déplacé survole un autre élément. Par défaut, sa valeur est"intersect".

Option - tolerance

Cette option est une chaîne qui spécifie le mode à utiliser pour tester si l'élément déplacé survole un autre élément. Par défaut, sa valeur est"intersect"Les valeurs possibles sont -

  • intersect - L'élément chevauche l'autre élément d'au moins 50%.

  • pointer - Le pointeur de la souris chevauche l'autre élément.

Syntax

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

Cette option représente le z-index pour l'élément / l'assistant lors du tri. Par défaut, sa valeur est1000.

Option - zIndex

Cette option représente l'index Z pour l'élément / l'assistant lors du tri. Par défaut, sa valeur est1000.

Syntax

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

La section suivante vous montrera quelques exemples fonctionnels de la fonctionnalité de glisser.

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité triable, en ne passant aucun paramètre au sortable() méthode.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML sortexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Réorganisez les produits ci-dessus, utilisez la souris pour faire glisser les éléments.

Utilisation des options Délai et distance

L'exemple suivant illustre l'utilisation de trois options (a) delay et (b) distance dans la fonction de tri de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML sortexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Réorganisez les produits ci-dessus, utilisez la souris pour faire glisser les éléments. Pour éviter un tri accidentel par délai (temps) ou par distance, nous avons défini un nombre de millisecondes pendant lequel l'élément doit être glissé avant le début du tri avec l' option de délai . Nous avons également défini une distance en pixels à laquelle l'élément doit être glissé avant que le tri ne commence avec l' option distance .

Utilisation de l'espace réservé

L'exemple suivant illustre l'utilisation de trois options placeholder dans la fonction de tri de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #sortable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML sortexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Essayez de faire glisser des éléments pour les réorganiser, pendant que vous faites glisser des éléments, l'espace réservé (nous avons utilisé la classe de surbrillance pour styliser cet espace) apparaîtra sur un emplacement disponible.

Utilisation des options Connectwith et Droponempty

L'exemple suivant illustre l'utilisation de trois options (a) connectWith et (b) dropOnEmpty dans la fonction de tri de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-5, #sortable-6,#sortable-7 { 
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li { 
            margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML sortexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Triez les éléments d'une List1 dans une autre (List2) et vice versa, en passant un sélecteur dans l' option connectWith . Cela se fait en regroupant toutes les listes associées avec une classe CSS, puis en transmettant cette classe à la fonction triable (par exemple, connectWith: '# sortable-5, # sortable-6').

Essayez de faire glisser les éléments de la liste 3 vers la liste 2 ou la liste 1. Comme nous avons défini l' option dropOnEmpty sur false , il ne sera pas possible de supprimer ces éléments.

$ (selector, context) .sortable ("action", [params]), méthode

La méthode sortable (action, params) peut effectuer une action sur les éléments triables, par exemple pour empêcher le déplacement. leaction est spécifié sous forme de chaîne dans le premier argument et éventuellement, un ou plusieurs params peut être fourni en fonction de l'action donnée.

En gros, ici les actions ne sont rien mais ce sont des méthodes jQuery que nous pouvons utiliser sous forme de chaîne.

Syntaxe

$(selector, context).sortable ("action", [params]);

Le tableau suivant répertorie les actions pour cette méthode -

Sr.No. Action et description
1 Annuler()

Cette action annule l'opération de tri en cours. Ceci est très utile dans les gestionnaires pour les événements de réception et d'arrêt de tri. Cette méthode n'accepte aucun argument.

Action - cancel()

Annule l'opération de tri en cours. Ceci est très utile dans les gestionnaires pour les événements de réception et d'arrêt de tri. Cette méthode n'accepte aucun argument.

Syntax

$(".selector").sortable("cancel");
2 détruire()

Cette action supprime complètement la fonctionnalité de tri. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument.

Action - destroy()

Cette action supprime complètement la fonctionnalité de tri. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument.

Syntax

$(".selector").sortable("destroy");
3 désactiver ()

Cette action désactive la triabilité de tous les éléments triables dans l'ensemble encapsulé. La triabilité des éléments n'est pas supprimée et peut être restaurée en appelant la variante enable de cette méthode. Cette méthode n'accepte aucun argument.

Action - disable()

Cette action désactive la triabilité de tous les éléments triables dans l'ensemble encapsulé. La triabilité des éléments n'est pas supprimée et peut être restaurée en appelant la variante enable de cette méthode. Cette méthode n'accepte aucun argument.

Syntax

$(".selector").sortable("disable");
4 activer()

Réactive la triabilité sur tous les éléments triables de l'ensemble enveloppé dont la triabilité a été désactivée. Notez que cette méthode n'ajoutera pas de possibilité de tri pour les éléments non triables. Cette méthode n'accepte aucun argument.

Action - enable()

Réactive la triabilité sur tous les éléments triables de l'ensemble enveloppé dont la triabilité a été désactivée. Notez que cette méthode n'ajoutera pas de possibilité de tri pour les éléments non triables. Cette méthode n'accepte aucun argument.

Syntax

$(".selector").sortable("enable");
5 option (optionName)

Cette action obtient la valeur actuellement associée au nom d' option spécifié . Où optionName est le nom de l'option à obtenir.

Action - option( optionName )

Cette action obtient la valeur actuellement associée au nom d' option spécifié . Où optionName est le nom de l'option à obtenir.

Syntax

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 option()

Obtient un objet contenant des paires clé / valeur représentant le hachage d'options triables en cours. Cette méthode n'accepte aucun argument.

Action - option()

Obtient un objet contenant des paires clé / valeur représentant le hachage d'options triables en cours. Cette méthode n'accepte aucun argument.

Syntax

$(".selector").sortable("option");
sept option (optionName, valeur)

Cette action définit la valeur de l'option triables associée au spécifié optionName . Où optionName est le nom de l'option à définir et valeur est la valeur à définir pour l'option.

Action - option( optionName, value )

Cette action définit la valeur de l'option triables associée au spécifié optionName . Où optionName est le nom de l'option à définir et valeur est la valeur à définir pour l'option.

Syntax

$(".selector").sortable("option", "disabled", true);
8 option (options)

Définit une ou plusieurs options pour le triable. Où options est une carte de paires option-valeur à définir.

Action - option( options )

Définit une ou plusieurs options pour le triable. Où options est une carte de paires option-valeur à définir.

Syntax

$( ".selector" ).sortable( "option", { disabled: true } );
9 rafraîchir()

Cette action actualise la liste des éléments si nécessaire. Cette méthode n'accepte aucun argument. L'appel de cette méthode entraînera la reconnaissance des nouveaux éléments ajoutés au triable.

Action - refresh()

Cette action actualise la liste des éléments si nécessaire. Cette méthode n'accepte aucun argument. L'appel de cette méthode entraînera la reconnaissance des nouveaux éléments ajoutés au triable.

Syntax

$(".selector").sortable("refresh");
dix toArray (options)

Cette méthode renvoie un tableau des valeurs id des éléments triables dans l'ordre trié. Cette méthode prend Options comme paramètre pour personnaliser la sérialisation ou l'ordre de tri.

Action - toArray( options )

Cette méthode renvoie un tableau des valeurs id des éléments triables dans l'ordre trié. Cette méthode prend Options comme paramètre pour personnaliser la sérialisation ou l'ordre de tri.

Syntax

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 sérialiser (options)

Cette méthode retourne une chaîne de requête sérialisée (soumise via Ajax) formée à partir du triable.

Action - serialize( options )

Cette méthode retourne une chaîne de requête sérialisée (soumise via Ajax) formée à partir du triable. Il fonctionne par défaut en regardant l'id de chaque élément au format "setname_number", et il crache un hachage comme "setname [] = number & setname [] = number".

Syntax

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
12 refreshPositions ()

Cette méthode est principalement utilisée en interne pour actualiser les informations mises en cache du triable. Cette méthode n'accepte aucun argument.

Action - refreshPositions()

Cette méthode est principalement utilisée en interne pour actualiser les informations mises en cache du triable. Cette méthode n'accepte aucun argument.

Syntax

$(".selector").sortable("refreshPositions");
13 widget ()

Cette méthode retourne un objet jQuery contenant l'élément triable. Cette méthode n'accepte aucun argument.

Action - widget()

Cette méthode retourne un objet jQuery contenant l'élément triable. Cette méthode n'accepte aucun argument.

Syntax

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

Exemple

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation de la méthode toArray (options) .

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-8{ list-style-type: none; margin: 0; 
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML sortexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Essayez de trier les éléments, l'ordre des éléments est affiché en bas. Ici, nous appelons $ (this) .sortable ('toArray'). ToString () , qui donnera une liste de chaînes de tous les identifiants d'élément, cela pourrait ressembler à1,2,3,4.

Gestion des événements sur les éléments triables

En plus de la méthode triable (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui sont déclenchées pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -

Sr.No. Méthode d'événement et description
1 activer (événement, ui)

Cet événement est déclenché sur le triable lorsqu'une opération de tri démarre sur le triable connecté.

Event - activate(event, ui)

Cet événement est déclenché sur le triable lorsqu'une opération de tri démarre sur le triable connecté. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
2 beforeStop (événement, interface utilisateur)

Cet événement est déclenché lorsque l'opération de tri est sur le point de se terminer, avec la référence d'élément d'assistance et d'espace réservé toujours valide.

Event - beforeStop(event, ui)

Cet événement est déclenché lorsque l'opération de tri est sur le point de se terminer, avec la référence d'élément d'assistance et d'espace réservé toujours valide. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3 changer (événement, ui)

Cet événement est déclenché lorsque l'élément trié change de position dans le DOM.

Event - change(event, ui)

Cet événement est déclenché lorsque l'élément trié change de position dans le DOM. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
4 create (événement, interface utilisateur)

Cet événement est déclenché lors de la création du triable.

Event - create(event, ui)

Cet événement est déclenché lors de la création du triable. Où event est de type Event et ui est de type Object . L'objet ui est vide mais inclus par souci de cohérence avec d'autres événements.

Syntax

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5 désactiver (événement, interface utilisateur)

Cet événement est déclenché lorsqu'un tri connecté s'arrête, propagé au triable connecté.

Event - deactivate(event, ui)

Cet événement est déclenché lorsqu'un tri connecté s'arrête, propagé au triable connecté. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6 out (événement, ui)

Cet événement est déclenché lorsque l'élément de tri est éloigné d'une liste connectée.

Event - out(event, ui)

Cet événement est déclenché lorsque l'élément de tri est éloigné d'une liste connectée. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
sept over (événement, ui)

Cet événement est déclenché lorsqu'un élément de tri se déplace dans une liste connectée.

Event - over(event, ui)

Cet événement est déclenché lorsqu'un élément de tri se déplace dans une liste connectée. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
8 recevoir (événement, ui)

Cet événement est déclenché lorsqu'une liste connectée a reçu un élément de tri d'une autre liste.

Event - receive(event, ui)

Cet événement est déclenché lorsqu'une liste connectée a reçu un élément de tri d'une autre liste. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9 supprimer (événement, interface utilisateur)

Cet événement est déclenché lorsque l'élément de tri est supprimé d'une liste connectée et glissé dans une autre.

Event - remove(event, ui)

Cet événement est déclenché lorsque l'élément de tri est supprimé d'une liste connectée et glissé dans une autre. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
dix tri (événement, ui)

Cet événement est déclenché à plusieurs reprises pour les événements mousemove lors d'une opération de tri.

Event - sort(event, ui)

Cet événement est déclenché à plusieurs reprises pour les événements mousemove lors d'une opération de tri. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11 start (événement, ui)

Cet événement est déclenché lorsqu'une opération de tri démarre.

Event - start(event, ui)

Cet événement est déclenché lorsqu'une opération de tri démarre. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
12 stop (événement, ui)

Cet événement est déclenché lorsqu'une opération de tri est terminée.

Event - stop(event, ui)

Cet événement est déclenché lorsqu'une opération de tri est terminée. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13 mise à jour (événement, interface utilisateur)

Cet événement est déclenché lorsqu'une opération de tri s'arrête et que la position de l'élément a été modifiée.

Event - update(event, ui)

Cet événement est déclenché lorsqu'une opération de tri s'arrête et que la position de l'élément a été modifiée. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • helper - Un objet jQuery représentant l'assistant en cours de tri.

  • item - Un objet jQuery représentant l'élément glissé actuel.

  • offset - La position absolue actuelle de l'assistant représentée par {top, left} ..

  • position - Position CSS actuelle de l'assistant en tant qu'objet {top, left}.

  • originalPosition - La position d'origine de l'élément représenté par {haut, gauche}.

  • sender - Le triable d'où provient l'élément s'il passe d'un triable à un autre.

  • placeholder - L'objet jQuery représentant l'élément utilisé comme espace réservé.

Syntax

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

Exemple

L'exemple suivant illustre l'utilisation de la méthode d'événement pendant la fonctionnalité de suppression. Cet exemple illustre l'utilisation des événements de réception , de démarrage et d' arrêt .

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-10, #sortable-11 { list-style-type: none; 
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
            padding: 0.4em; padding-left: 1.5em; 
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap">
         <div class = "wrap1"> 
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3> 
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML sortexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Essayez de trier les éléments de la liste 1, vous verrez le message s'afficher au début et à la fin de l'événement. Maintenant, déposez les éléments de la liste 2 à la liste 1, à nouveau un message s'affiche sur l' événement de réception .

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved