JqueryUI - Droppable

jQueryUI fournit droppable() pour rendre tout élément DOM déposable sur une cible spécifiée (une cible pour les éléments déplaçables)

Syntaxe

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

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

La méthode droppable (options) déclare qu'un élément HTML peut être utilisé comme élément dans lequel vous pouvez déposer d'autres éléments. Le paramètre options est un objet qui spécifie le comportement des éléments impliqués.

Syntaxe

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

Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -

$(selector, context).droppable({option1: value1, option2: value2..... });

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

N ° Sr. Option et description
1 J'accepte
Cette option est utilisée lorsque vous devez contrôler quels éléments déplaçables doivent être acceptés pour la suppression. Par défaut, sa valeur est *.

Option - accept

Cette option est utilisée lorsque vous devez contrôler quels éléments déplaçables doivent être acceptés pour la suppression. Par défaut, sa valeur est* ce qui signifie que chaque article est accepté par droppable.

Cela peut être de type -

  • Selector - Ce type indique quels éléments déplaçables sont acceptés.

  • Function- Une fonction de rappel sera appelée pour chaque élément déplaçable sur la page. Cette fonction doit retourner true si l'élément déplaçable est accepté par droppable.

Syntax

$( ".selector" ).droppable(
   { accept: ".special" }
);
2 activeClass

Cette option est une chaîne représentant une ou plusieurs classes CSS à ajouter à l'élément déposable lorsqu'un élément accepté (l'un de ceux indiqués dans options.accept ) est déplacé. Par défaut, sa valeur estfalse.

Option - activeClass

Cette option est une chaîne représentant une ou plusieurs classes CSS à ajouter à l'élément déposable lorsqu'un élément accepté (l'un de ceux indiqués dans options.accept ) est déplacé. Par défaut, sa valeur estfalse.

Syntax

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
3 addClasses

Cette option, lorsqu'elle est définie sur false , empêchera la classe ui-droppable d'être ajoutée aux éléments droppables. Par défaut, sa valeur esttrue.

Option - addClasses

Cette option, lorsqu'elle est définie sur false , empêchera la classe ui-droppable d'être ajoutée aux éléments droppables. Par défaut, sa valeur esttrue. Cela peut être souhaité comme une optimisation des performances lors de l'appel de .droppable () init sur des centaines d'éléments.

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 désactivée

Cette option, lorsqu'elle est définie sur true, désactive le droppable. Par défaut, sa valeur estfalse.

Option - disabled

Cette option, lorsqu'elle est définie sur true, désactive le largable, c'est-à-dire désactive le déplacement de l'élément sur les éléments spécifiés et le déplacement dans ces éléments. Par défaut, sa valeur estfalse.

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5 glouton

Cette option est utilisée lorsque vous avez besoin de contrôler quels éléments déplaçables doivent être acceptés pour être déposés sur des objets déposés imbriqués. Par défaut, sa valeur estfalse. Si cette option est définie sur true , les déposables parents ne recevront pas l'élément.

Option - greedy

Cette option est utilisée lorsque vous avez besoin de contrôler quels éléments déplaçables doivent être acceptés pour être déposés sur des objets déposés imbriqués. Par défaut, sa valeur estfalse. Si cette option est définie sur true , les déposables parents ne recevront pas l'élément.

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6 hoverClass

Cette option est String qui représente une ou plusieurs classes CSS à ajouter à l'élément de droppable lorsqu'un élément accepté (un élément indiqué dans options.accept ) s'y déplace. Par défaut, sa valeur estfalse.

Option - hoverClass

Cette option est String qui représente une ou plusieurs classes CSS à ajouter à l'élément de droppable lorsqu'un élément accepté (un élément indiqué dans options.accept ) s'y déplace. Par défaut, sa valeur estfalse.

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
sept portée

Cette option est utilisée pour restreindre l'action de dépôt des éléments déplaçables uniquement aux éléments qui ont le même options.scope (défini dans draggable (options)). Par défaut, sa valeur est"default".

Option - scope

Cette option est utilisée pour restreindre l'action de dépôt des éléments déplaçables uniquement aux éléments qui ont le même options.scope (défini dans draggable (options)). Par défaut, sa valeur est"default".

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
8 tolérance

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

Option - tolerance

Cette option est une chaîne qui spécifie comment l'élément déplaçable doit couvrir l'élément déposable pour la dépose acceptée. Par défaut, sa valeur est"intersect". Les valeurs possibles sont -

  • fit - Draggable couvre l'élément largable dans son intégralité.

  • intersect - Glissable chevauche l'élément déposable d'au moins 50% dans les deux directions.

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

  • touch - Draggable chevauche le dropable n'importe quelle quantité de toucher.

Syntax

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

La section suivante vous montrera quelques exemples fonctionnels de fonctionnalité de dépôt.

Fonctionnalité par défaut

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML dropexample.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 -

Utilisation de addClass, désactivé et tolérance

L'exemple suivant illustre l'utilisation de trois options (a) addClass (b) disabled et (c) tolerance dans la fonction drop de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML dropexample.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 -

Maintenant déposez l'élément sur le "Tolerance Touch!" (touchez simplement le bord de cette boîte) et voyez les changements de l'élément cible. Maintenant, déposez l'élément sur "Tolerance Fit!" cible, l'élément déplaçable doit chevaucher complètement l'élément cible, c'est-à-dire "Tolerance Fit!" cible.

Choisissez les éléments à supprimer

L'exemple suivant montre l'utilisation de l'option accept et scope option dans la fonction glisser de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
				
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
         
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML dropexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Vous pouvez maintenant jouer avec la sortie -

Ici, vous pouvez voir que vous pouvez déposer l'élément "Personnes du Japon" uniquement sur la cible "Japon" et l'élément "Personnes de l'Inde" sur la cible Inde. De la même manière, la portée pour «Les personnes qui veulent apprendre Java» est définie pour cibler «Java» et «Les personnes qui veulent apprendre Spring» est définie sur «Spring target».

Gérer l'apparence

L'exemple suivant montre l'utilisation des options activeClass et hoverClass de la classe JqueryUI, qui nous aident à gérer l'apparence.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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 type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML dropexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante -

Vous pouvez remarquer qu'en faisant glisser ou en survolant (au-dessus de la cible) l'élément "Faites-moi glisser vers ma cible", change la couleur de l'élément cible "Déposer ici".

$ (selector, context) .droppable ("action", params), méthode

La méthode droppable ("action", params) peut effectuer une action sur les éléments droppables, comme empêcher la fonctionnalité droppable. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "désactiver" pour empêcher la suppression). Découvrez les actions qui peuvent être passées, dans le tableau suivant.

Syntaxe

$(selector, context).droppable ("action", params);;

Le tableau suivant répertorie les différentes actions qui peuvent être utilisées avec cette méthode -

N ° Sr. Action et description
1 détruire

Cette action détruit complètement la fonctionnalité droppable d'un élément. Les éléments reviennent à leur état pré-init.

Action - destroy

Cette action détruit complètement la fonctionnalité droppable d'un élément. Les éléments reviennent à leur état pré-init.

Syntax

$( ".selector" ).droppable("destroy");
2 désactiver

Cette action désactive l'opération de dépôt. Les éléments ne sont plus des éléments largables. Cette méthode n'accepte aucun argument.

Action - disable

Cette action désactive l'opération de dépôt. Les éléments ne sont plus des éléments largables. Cette méthode n'accepte aucun argument.

Syntax

$( ".selector" ).droppable("disable");
3 activer

Cette action réactive l'opération de dépôt. Les éléments peuvent à nouveau recevoir un élément déposable. Cette méthode n'accepte aucun argument.

Action - enable

Cette action réactive l'opération de dépôt. Les éléments peuvent à nouveau recevoir un élément déposable. Cette méthode n'accepte aucun argument.

Syntax

$( ".selector" ).droppable("enable");
4 option

Cette action obtient un objet contenant des paires clé / valeur représentant le hachage d'options de dépôt actuel. Cette méthode n'accepte aucun argument.

Action - option

Cette action obtient un objet contenant des paires clé / valeur représentant le hachage d'options de dépôt actuel. Cette méthode n'accepte aucun argument.

Syntax

var options = $( ".selector" ).droppable( "option" );
5 option (optionName)

Cette action obtient la valeur de l'élément déposable actuellement associé avec le nom d' option spécifié . Cela prend une valeur String comme argument.

Action - option( optionName )

Cette action obtient la valeur de l'élément déposable actuellement associé avec le nom d' option spécifié . Cela prend une valeur String comme argument.

Syntax

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6 option (optionName, valeur)

Cette action définit la valeur de l'option déposable associée au nom d'option spécifié .

Action - option( optionName, value )

Cette action définit la valeur de l'option déposable associée au nom d'option spécifié . L'argument optionName est le nom de l'option à définir et value est la valeur à définir pour l'option.

Syntax

$( ".selector" ).droppable( "option", "disabled", true );
sept option (options)

Cette action définit une ou plusieurs options pour le droppable. L'argument options est une carte de paires option-valeur à définir.

Action - option( options )

Cette action définit une ou plusieurs options pour le droppable. L'argument options est une carte de paires option-valeur à définir.

Syntax

$( ".selector" ).droppable( "option", { disabled: true } );
8 widget

Cette action renvoie un objet jQuery contenant l'élément droppable. Cette méthode n'accepte aucun argument.

Cette action renvoie un objet jQuery contenant l'élément droppable. Cette méthode n'accepte aucun argument.

Syntax

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

Exemple

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML dropexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante -

Si vous déposez "glisser1" sur l'un des éléments nommés "déposer ici", vous remarquerez que cet élément est déposé et que cette action détruit complètement la fonctionnalité de dépôt d'un élément. Vous ne pouvez pas à nouveau déposer "drag2" et "drag3" sur cet élément.

Gestion d'événements sur les éléments déposables

En plus de la méthode droppable (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 -

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

Cet événement est déclenché lorsque l'élément déplaçable accepté commence à glisser. Cela peut être utile si vous voulez que le "s'allume" lorsque vous pouvez le déposer.

Event - activate(event, ui)

Cet événement est déclenché lorsque l'élément déplaçable accepté commence à glisser. Cela peut être utile si vous souhaitez que le "s'allume" lorsque vous pouvez le déposer. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • draggable - Un objet jQuery représentant l'élément déplaçable.

  • helper - Un objet jQuery représentant l'assistant qui est déplacé.

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

  • offset - Position de décalage actuelle de l'assistant déplaçable en tant qu'objet {haut, gauche}.

Syntax

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

Cet événement est déclenché lorsqu'un élément déposable est créé. Où event est de type Event et ui est de type Object .

Event - create(event, ui)

Cet événement est déclenché lorsqu'un élément déposable est créé. Où event est de type Event et ui est de type Object .

Syntax

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

Cet événement est déclenché lorsqu'un objet déplaçable accepté cesse de glisser. Où event est de type Event et ui est de type Object .

Event - deactivate(event, ui)

Cet événement est déclenché lorsqu'un objet déplaçable accepté cesse de glisser. Où event est de type Event et ui est de type Object et les types possibles sont -

  • draggable - Un objet jQuery représentant l'élément déplaçable.

  • helper - Un objet jQuery représentant l'assistant qui est déplacé.

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

  • offset - Position de décalage actuelle de l'assistant déplaçable en tant qu'objet {haut, gauche}.

Syntax

$(".selector").droppable(
   deactivate: function(event, ui) {}
);
4 drop (événement, ui)

Cette action est déclenchée lorsqu'un élément est déposé sur le droppable. Ceci est basé sur l' option de tolérance . Où event est de type Event et ui est de type Object .

Event - drop(event, ui)

Cette action est déclenchée lorsqu'un élément est déposé sur le droppable. Ceci est basé sur l' option de tolérance . Où event est de type Event , et ui est de type Object et les types possibles sont -

  • draggable - Un objet jQuery représentant l'élément déplaçable.

  • helper - Un objet jQuery représentant l'assistant qui est déplacé.

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

  • offset - Position de décalage actuelle de l'assistant déplaçable en tant qu'objet {haut, gauche}.

Syntax

$(".selector").droppable(
   drop: function(event, ui) {}
);
5 out (événement, ui)

Cet événement est déclenché lorsqu'un élément déplaçable accepté est tiré hors du dépôt. Ceci est basé sur l' option de tolérance . Où event est de type Event et ui est de type Object .

Event - out(event, ui)

Cet événement est déclenché quand un élément déplaçable accepté est tiré hors du dépôt. Ceci est basé sur l' option de tolérance . Où event est de type Event et ui est de type Object .

Syntax

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

Cet événement est déclenché lorsqu'un élément déplaçable accepté est glissé sur l'élément déposé. Ceci est basé sur l' option de tolérance . Où event est de type Event et ui est de type Object .

Event - over(event, ui)

Cet événement est déclenché lorsqu'un élément déplaçable accepté est glissé sur l'élément déposé. Ceci est basé sur l' option de tolérance . Où event est de type Event et ui est de type Object . Et les types possibles sont -

  • draggable - Un objet jQuery représentant l'élément déplaçable.

  • helper - Un objet jQuery représentant l'assistant qui est déplacé.

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

  • offset - Position de décalage actuelle de l'assistant déplaçable en tant qu'objet {haut, gauche}.

Syntax

$(".selector").droppable(
   over: 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 drop , over et out .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
					
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML dropexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante -

Ici, vous remarquerez comment le message dans l'élément déposable change lorsque vous faites glisser l'élément.