JqueryUI - Droppable

jQueryUI fornisce droppable() metodo per rendere qualsiasi elemento DOM trascinabile su una destinazione specificata (una destinazione per elementi trascinabili).

Sintassi

Il droppable() metodo può essere utilizzato in due forme:

$ (selettore, contesto) .droppable (opzioni) Metodo

Il metodo droppable (opzioni) dichiara che un elemento HTML può essere utilizzato come elemento in cui è possibile rilasciare altri elementi. Il parametro options è un oggetto che specifica il comportamento degli elementi coinvolti.

Sintassi

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

Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:

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

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:

Sr.No. Opzione e descrizione
1 accettare
Questa opzione viene utilizzata quando è necessario controllare quali elementi trascinabili devono essere accettati per il rilascio. Per impostazione predefinita, il suo valore è *.

Option - accept

Questa opzione viene utilizzata quando è necessario controllare quali elementi trascinabili devono essere accettati per il rilascio. Per impostazione predefinita, il suo valore è* significa che ogni articolo è accettato da droppable.

Questo può essere di tipo -

  • Selector - Questo tipo indica quali elementi trascinabili sono accettati.

  • Function- Una funzione di callback verrà chiamata per ogni elemento trascinabile sulla pagina. Questa funzione dovrebbe restituire true se l'elemento trascinabile viene accettato da droppable.

Syntax

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

Questa opzione è una stringa che rappresenta una o più classi CSS da aggiungere all'elemento trascinabile quando viene trascinato un elemento accettato (uno di quelli indicati in options.accept ). Per impostazione predefinita, il suo valore èfalse.

Option - activeClass

Questa opzione è una stringa che rappresenta una o più classi CSS da aggiungere all'elemento trascinabile quando viene trascinato un elemento accettato (uno di quelli indicati in options.accept ). Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione se impostata su false impedirà che la classe ui-droppable venga aggiunta agli elementi droppable. Per impostazione predefinita, il suo valore ètrue.

Option - addClasses

Questa opzione se impostata su false impedirà che la classe ui-droppable venga aggiunta agli elementi droppable. Per impostazione predefinita, il suo valore ètrue. Questo può essere desiderato come ottimizzazione delle prestazioni quando si chiama .droppable () init su centinaia di elementi.

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 Disabilitato

Questa opzione quando impostata su true disabilita il droppable. Per impostazione predefinita, il suo valore èfalse.

Option - disabled

Questa opzione, se impostata su true, disabilita il droppable ie disabilita il movimento dell'elemento sugli elementi specificati e il rilascio in quegli elementi. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione viene utilizzata quando è necessario controllare quali elementi trascinabili devono essere accettati per il rilascio sui droppabili annidati. Per impostazione predefinita, il suo valore èfalse. Se questa opzione è impostata su true , qualsiasi elemento droppabile genitore non riceverà l'elemento.

Option - greedy

Questa opzione viene utilizzata quando è necessario controllare quali elementi trascinabili devono essere accettati per il rilascio sui droppabili annidati. Per impostazione predefinita, il suo valore èfalse. Se questa opzione è impostata su true , qualsiasi elemento droppabile genitore non riceverà l'elemento.

Syntax

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

Questa opzione è String che rappresenta una o più classi CSS da aggiungere all'elemento di droppable quando un elemento accettato (un elemento indicato in options.accept ) si sposta in esso. Per impostazione predefinita, il suo valore èfalse.

Option - hoverClass

Questa opzione è String che rappresenta una o più classi CSS da aggiungere all'elemento di droppable quando un elemento accettato (un elemento indicato in options.accept ) si sposta in esso. Per impostazione predefinita, il suo valore èfalse.

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
7 scopo

Questa opzione viene utilizzata per limitare l'azione trascinabile degli elementi trascinabili solo agli elementi che hanno le stesse opzioni. Ambito (definito in trascinabile (opzioni)). Per impostazione predefinita, il suo valore è"default".

Option - scope

Questa opzione viene utilizzata per limitare l'azione trascinabile degli elementi trascinabili solo agli elementi che hanno le stesse opzioni. Ambito (definito in trascinabile (opzioni)). Per impostazione predefinita, il suo valore è"default".

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
8 tolleranza

Questa opzione è una stringa che specifica quale modalità utilizzare per verificare se un trascinabile passa con il mouse sopra un trascinabile. Per impostazione predefinita, il suo valore è"intersect".

Option - tolerance

Questa opzione è una stringa che specifica come l'elemento trascinabile deve coprire l'elemento trascinabile affinché il rilascio venga accettato. Per impostazione predefinita, il suo valore è"intersect". I valori possibili sono -

  • fit - Trascinabile copre completamente l'elemento droppabile.

  • intersect - Trascinabile si sovrappone all'elemento trascinabile almeno del 50% in entrambe le direzioni.

  • pointer - Il puntatore del mouse si sovrappone all'elemento trascinabile.

  • touch - Trascinabile si sovrappone al droppabile qualsiasi quantità di tocco.

Syntax

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

La sezione seguente ti mostrerà alcuni esempi funzionanti della funzionalità di rilascio.

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità trascinabile, senza passare parametri al file droppable() metodo.

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

Salviamo il codice sopra in un file HTML dropexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Uso di addClass, disabilitato e tolleranza

Il seguente esempio dimostra l'utilizzo di tre opzioni (a) addClass (b) disabled e (c) tolerance nella funzione drop di 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>

Salviamo il codice sopra in un file HTML dropexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Ora rilascia l'elemento su "Tolerance Touch!" box (basta toccare il bordo di questo box) e vedere le modifiche dell'elemento target. Ora per rilasciare l'elemento su "Tolerance Fit!" target, l'elemento trascinabile deve sovrapporsi completamente all'elemento target, ovvero "Tolerance Fit!" bersaglio.

Scegli gli elementi da eliminare

Il seguente esempio dimostra l'uso di option accept e scope opzione nella funzione di trascinamento di 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>

Salviamo il codice sopra in un file HTML dropexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con l'uscita -

Qui puoi vedere che puoi rilasciare l'elemento "People from Japan" solo sul target "Japan" e l'elemento "People from India" sul target India. Allo stesso modo, l'ambito di "Persone che vogliono imparare Java" è impostato come target "Java" e "Persone che vogliono imparare Spring" è impostato su "Target Spring".

Gestire l'aspetto

L'esempio seguente mostra l'uso delle opzioni activeClass e hoverClass della classe JqueryUI, che ci aiutano a gestire l'aspetto.

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

Salviamo il codice sopra in un file HTML dropexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:

Puoi notare che trascinando o passando il mouse (sopra il target) dell'elemento "Trascinami sul mio target", cambia il colore dell'elemento target "Drop here".

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

Il metodo droppable ("action", params) può eseguire un'azione sugli elementi droppabili, come prevenire la funzionalità droppable. L'azione è specificata come una stringa nel primo argomento (ad esempio, "disabilita" per impedire l'eliminazione). Controlla le azioni che possono essere trasmesse, nella tabella seguente.

Sintassi

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

La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:

Sr.No. Azione e descrizione
1 distruggere

Questa azione distrugge completamente la funzionalità droppabile di un elemento. Gli elementi tornano al loro stato pre-inizializzazione.

Action - destroy

Questa azione distrugge completamente la funzionalità droppabile di un elemento. Gli elementi tornano al loro stato pre-inizializzazione.

Syntax

$( ".selector" ).droppable("destroy");
2 disattivare

Questa azione disabilita l'operazione trascinabile. Gli elementi non sono più elementi droppabili. Questo metodo non accetta argomenti.

Action - disable

Questa azione disabilita l'operazione trascinabile. Gli elementi non sono più elementi droppabili. Questo metodo non accetta argomenti.

Syntax

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

Questa azione riattiva l'operazione droppabile. Gli elementi possono nuovamente ricevere un elemento droppabile. Questo metodo non accetta argomenti.

Action - enable

Questa azione riattiva l'operazione droppabile. Gli elementi possono nuovamente ricevere un elemento droppabile. Questo metodo non accetta argomenti.

Syntax

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

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni trascinabili corrente. Questo metodo non accetta argomenti.

Action - option

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni trascinabili corrente. Questo metodo non accetta argomenti.

Syntax

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

Questa azione ottiene il valore dell'elemento trascinabile attualmente associato con optionName specificato . Questo prende un valore String come argomento.

Action - option( optionName )

Questa azione ottiene il valore dell'elemento trascinabile attualmente associato con optionName specificato . Questo prende un valore String come argomento.

Syntax

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

Questa azione imposta il valore dell'opzione trascinabile associata a optionName specificato .

Action - option( optionName, value )

Questa azione imposta il valore dell'opzione trascinabile associata a optionName specificato . L'argomento optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione.

Syntax

$( ".selector" ).droppable( "option", "disabled", true );
7 opzione (opzioni)

Questa azione imposta una o più opzioni per il droppabile. L'argomento opzioni è una mappa di coppie opzione-valore da impostare.

Action - option( options )

Questa azione imposta una o più opzioni per il droppabile. L'argomento opzioni è una mappa di coppie opzione-valore da impostare.

Syntax

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

Questa azione restituisce un oggetto jQuery contenente l'elemento droppabile. Questo metodo non accetta argomenti.

Questa azione restituisce un oggetto jQuery contenente l'elemento droppabile. Questo metodo non accetta argomenti.

Syntax

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

Esempio

Vediamo ora un esempio usando le azioni della tabella sopra. Il seguente esempio dimostra l'uso del metodo 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>

Salviamo il codice sopra in un file HTML dropexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:

Se si rilascia "drag1" su uno degli elementi denominati "rilascia qui", si noterà che questo elemento viene rilasciato e questa azione distrugge completamente la funzionalità trascinabile di un elemento. Non è possibile rilasciare nuovamente "drag2" e "drag3" su questo elemento.

Gestione degli eventi su elementi droppabili

Oltre al metodo droppable (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati ​​per un particolare evento. Questi metodi di evento sono elencati di seguito:

Sr.No. Metodo e descrizione dell'evento
1 attivare (evento, ui)

Questo evento viene attivato quando l'elemento trascinabile accettato inizia a trascinare. Questo può essere utile se vuoi che il droppable "si illumini" quando può essere lasciato cadere.

Event - activate(event, ui)

Questo evento viene attivato quando l'elemento trascinabile accettato inizia a trascinare. Questo può essere utile se vuoi che il droppable "si illumini" quando può essere lasciato cadere. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • draggable - Un oggetto jQuery che rappresenta l'elemento trascinabile.

  • helper - Un oggetto jQuery che rappresenta l'helper che viene trascinato.

  • position - Posizione CSS corrente dell'helper trascinabile come oggetto {top, left}.

  • offset - Posizione di offset corrente dell'helper trascinabile come oggetto {top, left}.

Syntax

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
2 create (evento, ui)

Questo evento viene attivato quando viene creato un elemento trascinabile. Dove event è di tipo Event e ui è di tipo Object .

Event - create(event, ui)

Questo evento viene attivato quando viene creato un elemento trascinabile. Dove event è di tipo Event e ui è di tipo Object .

Syntax

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
3 disattivare (evento, ui)

Questo evento viene attivato quando un trascinabile accettato interrompe il trascinamento. Dove event è di tipo Event e ui è di tipo Object .

Event - deactivate(event, ui)

Questo evento viene attivato quando un trascinabile accettato interrompe il trascinamento. Dove l' evento è di tipo Evento e ui è di tipo Oggetto e i tipi possibili sono:

  • draggable - Un oggetto jQuery che rappresenta l'elemento trascinabile.

  • helper - Un oggetto jQuery che rappresenta l'helper che viene trascinato.

  • position - Posizione CSS corrente dell'helper trascinabile come oggetto {top, left}.

  • offset - Posizione di offset corrente dell'helper trascinabile come oggetto {top, left}.

Syntax

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

Questa azione viene attivata quando un elemento viene rilasciato sul trascinabile. Questo si basa sull'opzione di tolleranza . Dove event è di tipo Event e ui è di tipo Object .

Event - drop(event, ui)

Questa azione viene attivata quando un elemento viene rilasciato sul trascinabile. Questo si basa sull'opzione di tolleranza . Dove l' evento è di tipo Evento e ui è di tipo Oggetto e i tipi possibili sono:

  • draggable - Un oggetto jQuery che rappresenta l'elemento trascinabile.

  • helper - Un oggetto jQuery che rappresenta l'helper che viene trascinato.

  • position - Posizione CSS corrente dell'helper trascinabile come oggetto {top, left}.

  • offset - Posizione di offset corrente dell'helper trascinabile come oggetto {top, left}.

Syntax

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

Questo evento viene attivato quando un elemento trascinabile accettato viene trascinato fuori dal trascinabile. Questo si basa sull'opzione di tolleranza . Dove event è di tipo Event e ui è di tipo Object .

Event - out(event, ui)

Questo evento viene attivato quando un elemento trascinabile accettato viene trascinato fuori dal trascinabile. Questo si basa sull'opzione di tolleranza . Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato quando un elemento trascinabile accettato viene trascinato sul trascinabile. Questo si basa sull'opzione di tolleranza . Dove event è di tipo Event e ui è di tipo Object .

Event - over(event, ui)

Questo evento viene attivato quando un elemento trascinabile accettato viene trascinato sul trascinabile. Questo si basa sull'opzione di tolleranza . Dove event è di tipo Event e ui è di tipo Object. E i tipi possibili sono:

  • draggable - Un oggetto jQuery che rappresenta l'elemento trascinabile.

  • helper - Un oggetto jQuery che rappresenta l'helper che viene trascinato.

  • position - Posizione CSS corrente dell'helper trascinabile come oggetto {top, left}.

  • offset - Posizione di offset corrente dell'helper trascinabile come oggetto {top, left}.

Syntax

$(".selector").droppable(
   over: function(event, ui) {}
);

Esempio

L'esempio seguente mostra l'utilizzo del metodo dell'evento durante la funzionalità di rilascio. Questo esempio dimostra l'uso di eventi drop , over e 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>

Salviamo il codice sopra in un file HTML dropexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:

Qui noterai come il messaggio nell'elemento trascinabile cambia mentre trascini l'elemento.