JqueryUI - Droppable

jQueryUI zapewnia droppable() metoda umożliwiająca upuszczanie dowolnego elementu DOM w określonym miejscu docelowym (miejsce docelowe dla elementów przeciąganych).

Składnia

Plik droppable() metoda może być stosowana w dwóch formach -

$ (selektor, kontekst). droppable (opcje) Metoda
$ (selektor, kontekst). droppable ("akcja", parametry) Metoda

$ (selektor, kontekst). droppable (opcje) Metoda

Metoda droppable (options) deklaruje, że element HTML może być użyty jako element, w którym można upuścić inne elementy. Te opcje parametr jest obiektem, który określa zachowanie elementów zaangażowanych.

Składnia

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

Możesz podać jedną lub więcej opcji naraz, używając obiektu JavaScript. Jeśli ma zostać podanych więcej niż jedna opcja, oddziel je przecinkiem w następujący sposób -

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

W poniższej tabeli wymieniono różne opcje , których można użyć z tą metodą -


$( ".selector" ).droppable(
   { accept: ".special" }
);
$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
$( ".selector" ).droppable(
   { addClasses: false }
);
$( ".selector" ).droppable(
   { disabled: true }
);
$( ".selector" ).droppable(
   { greedy: true }
);
$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
$( ".selector" ).droppable(
   { scope: "tasks" }
);
$( ".selector" ).droppable(
   { tolerance: "fit" }
);

Sr.No.	Opcja i opis
1	zaakceptować Ta opcja jest używana, gdy musisz kontrolować, które elementy przeciągane mają być akceptowane do upuszczenia. Domyślnie jego wartość to. Option - accept* Ta opcja jest używana, gdy musisz kontrolować, które elementy przeciągane mają być akceptowane do upuszczenia. Domyślnie jego wartość to* co oznacza, że każdy przedmiot jest akceptowany przez droppable. Może to być typ - Selector - Ten typ wskazuje, które elementy przeciągane są akceptowane. Function- Funkcja wywołania zwrotnego zostanie wywołana dla każdego elementu na stronie, który można przeciągać. Ta funkcja powinna zwrócić wartość true, jeśli element draggable jest akceptowany przez droppable. Syntax `$( ".selector" ).droppable( { accept: ".special" } );`
2	activeClass Ta opcja to String reprezentujący jedną lub więcej klas CSS, które mają być dodane do elementu do upuszczania, gdy jest przeciągany akceptowany element (jeden z tych wskazanych w options.accept ). Domyślnie jego wartość tofalse. Option - activeClass Ta opcja to String reprezentujący jedną lub więcej klas CSS, które mają być dodane do elementu do upuszczania, gdy jest przeciągany akceptowany element (jeden z tych wskazanych w options.accept ). Domyślnie jego wartość tofalse. Syntax `$( ".selector" ).droppable( { activeClass: "ui-state-highlight" } );`
3	addClasses Ta opcja, gdy jest ustawiona na false , zapobiegnie dodaniu klasy ui-droppable do elementów droppable. Domyślnie jego wartość totrue. Option - addClasses Ta opcja, gdy jest ustawiona na false , zapobiegnie dodaniu klasy ui-droppable do elementów droppable. Domyślnie jego wartość totrue. Może to być pożądane jako optymalizacja wydajności podczas wywoływania funkcji .droppable () init na setkach elementów. Syntax `$( ".selector" ).droppable( { addClasses: false } );`
4	wyłączone Ta opcja, gdy jest ustawiona na true, wyłącza droppable. Domyślnie jego wartość tofalse. Option - disabled Ta opcja, gdy jest ustawiona na true, wyłącza droppable, tj. Wyłącza przesuwanie elementu nad określonymi elementami i upuszczanie do tych elementów. Domyślnie jego wartość tofalse. Syntax `$( ".selector" ).droppable( { disabled: true } );`
5	chciwy Ta opcja jest używana, gdy musisz kontrolować, które elementy przeciągane mają być akceptowane do upuszczania na zagnieżdżonych elementach droppables. Domyślnie jego wartość tofalse. Jeśli ta opcja jest ustawiona na true , żadne elementy nadrzędne droppables nie otrzymają elementu. Option - greedy Ta opcja jest używana, gdy musisz kontrolować, które elementy przeciągane mają być akceptowane do upuszczania na zagnieżdżonych elementach droppables. Domyślnie jego wartość tofalse. Jeśli ta opcja jest ustawiona na true , żadne elementy nadrzędne droppables nie otrzymają elementu. Syntax `$( ".selector" ).droppable( { greedy: true } );`
6	hoverClass Ta opcja to String reprezentujący jedną lub więcej klas CSS, które mają być dodane do elementu droppable, gdy zaakceptowany element (element wskazany w options.accept ) zostanie do niego przeniesiony. Domyślnie jego wartość tofalse. Option - hoverClass Ta opcja to String reprezentujący jedną lub więcej klas CSS, które mają być dodane do elementu droppable, gdy zaakceptowany element (element wskazany w options.accept ) zostanie do niego przeniesiony. Domyślnie jego wartość tofalse. Syntax `$( ".selector" ).droppable( { hoverClass: "drop-hover" } );`
7	zakres Ta opcja służy do ograniczenia możliwości upuszczania elementów, które można przeciągać, tylko do elementów, które mają te same opcje. Zakres (zdefiniowane w draggable (opcje)). Domyślnie jego wartość to"default". Option - scope Ta opcja służy do ograniczenia możliwości upuszczania elementów, które można przeciągać, tylko do elementów, które mają te same opcje. Zakres (zdefiniowane w draggable (opcje)). Domyślnie jego wartość to"default". Syntax `$( ".selector" ).droppable( { scope: "tasks" } );`
8	tolerancja Ta opcja jest ciągiem, który określa, który tryb ma być używany do testowania, czy element do przeciągania znajduje się nad elementem do upuszczania. Domyślnie jego wartość to"intersect". Option - tolerance Ta opcja jest String , który określa jak element przeciągany powinna obejmować droppable element spadku akceptowane. Domyślnie jego wartość to"intersect". Możliwe wartości to - fit - Draggable w pełni zakrywa element możliwy do upuszczenia. intersect - Możliwość przeciągania zachodzi na element możliwy do upuszczenia w co najmniej 50% w obu kierunkach. pointer - Wskaźnik myszy zachodzi na element możliwy do upuszczenia. touch - Draggable nakłada się na droppable dowolną ilość dotknięcia. Syntax `$( ".selector" ).droppable( { tolerance: "fit" } );`

Poniższa sekcja przedstawia kilka działających przykładów funkcji upuszczania.

Domyślna funkcjonalność

Poniższy przykład ilustruje prosty przykład funkcji, którą można usunąć, nie przekazując żadnych parametrów do droppable() metoda.

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

Zapiszmy powyższy kod w pliku HTML dropexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -

Stosowanie addClass, disabled i tolerance

Poniższy przykład ilustruje użycie trzech opcji (a) addClass (b) disabled i (c) tolerance w funkcji upuszczania 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>

Teraz upuść element na „Tolerance Touch!” (wystarczy dotknąć krawędzi tego pola) i zobaczyć zmiany elementu docelowego. Teraz upuść element na „Dopasowanie tolerancji!” element docelowy, element przeciągany musi w pełni zachodzić na element docelowy, tj. „Dopasowanie tolerancji!” cel.

Wybierz elementy do upuszczenia

Poniższy przykład demonstruje użycie Option accept i scope opcja w funkcji przeciągania 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>

W tym miejscu widać, że można upuścić element „Ludzie z Japonii” tylko na celu „Japonia”, a element „Ludzie z Indii” w docelowych Indiach. Podobnie zakres „Osoby, które chcą się uczyć języka Java” jest ustawiony na „Java”, a „Osoby, które chcą się uczyć wiosny” jest ustawiony na „Cel wiosny”.

Zarządzanie wyglądem

Poniższy przykład demonstruje użycie opcji activeClass i hoverClass klasy JqueryUI, które pomagają nam zarządzać wyglądem.

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

Zapiszmy powyższy kod w pliku HTML dropexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe -

Możesz zauważyć, że przeciąganie lub najechanie kursorem (na cel) elementu „Drag me to my target” powoduje zmianę koloru elementu docelowego „Drop here”.

$ (selektor, kontekst). droppable ("akcja", parametry) Metoda

Metoda droppable („action”, params) może wykonywać akcję na elementach, które można usuwać, na przykład zapobiegać usuwaniu funkcjonalności. Akcja jest określana jako łańcuch w pierwszym argumencie (np. „Wyłącz”, aby zapobiec upuszczeniu). Zapoznaj się z czynnościami, które można wykonać, w poniższej tabeli.

Składnia

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

W poniższej tabeli wymieniono różne akcje , których można użyć z tą metodą -


$( ".selector" ).droppable("destroy");
$( ".selector" ).droppable("disable");
$( ".selector" ).droppable("enable");
var options = $( ".selector" ).droppable( "option" );
var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
$( ".selector" ).droppable( "option", "disabled", true );
$( ".selector" ).droppable( "option", { disabled: true } );
var widget = $( ".selector" ).droppable( "widget" );

Sr.No.	Działanie i opis
1	zniszczyć Ta czynność całkowicie niszczy możliwą do upuszczenia funkcjonalność elementu. Elementy wracają do stanu sprzed uruchomienia. Action - destroy Ta czynność całkowicie niszczy możliwą do upuszczenia funkcjonalność elementu. Elementy wracają do stanu sprzed uruchomienia. Syntax `$( ".selector" ).droppable("destroy");`
2	wyłączyć Ta akcja wyłącza operację, którą można usunąć. Elementy nie są już elementami, które można usunąć. Ta metoda nie przyjmuje żadnych argumentów. Action - disable Ta akcja wyłącza operację, którą można usunąć. Elementy nie są już elementami, które można usunąć. Ta metoda nie przyjmuje żadnych argumentów. Syntax `$( ".selector" ).droppable("disable");`
3	włączyć Ta akcja ponownie aktywuje operację, którą można usunąć. Elementy mogą ponownie otrzymać element, który można usunąć. Ta metoda nie przyjmuje żadnych argumentów. Action - enable Ta akcja ponownie aktywuje operację, którą można usunąć. Elementy mogą ponownie otrzymać element, który można usunąć. Ta metoda nie przyjmuje żadnych argumentów. Syntax `$( ".selector" ).droppable("enable");`
4	opcja Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące bieżący skrót opcji możliwych do usunięcia. Ta metoda nie przyjmuje żadnych argumentów. Action - option Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące bieżący skrót opcji możliwych do usunięcia. Ta metoda nie przyjmuje żadnych argumentów. Syntax `var options = $( ".selector" ).droppable( "option" );`
5	opcja (optionName) Ta akcja pobiera wartość aktualnie powiązanego elementu do upuszczania z określoną opcją nazwa_opcji . Jako argument przyjmuje wartość typu String. Action - option( optionName ) Ta akcja pobiera wartość aktualnie powiązanego elementu do upuszczania z określoną opcją nazwa_opcji . Jako argument przyjmuje wartość typu String. Syntax `var isDisabled = $( ".selector" ).droppable( "option", "disabled" );`
6	opcja (nazwa_opcji, wartość) Ta akcja ustawia wartość opcji droppable skojarzonej z określoną optionName . Action - option( optionName, value ) Ta akcja ustawia wartość opcji droppable skojarzonej z określoną optionName . Argument nazwa_opcji to nazwa opcji, która ma zostać ustawiona, a wartość to wartość, która ma zostać ustawiona dla opcji. Syntax `$( ".selector" ).droppable( "option", "disabled", true );`
7	opcja (opcje) Ta akcja ustawia jedną lub więcej opcji dla droppable. Opcje argumentów to mapa par opcja-wartość do ustawienia. Action - option( options ) Ta akcja ustawia jedną lub więcej opcji dla droppable. Opcje argumentów to mapa par opcja-wartość do ustawienia. Syntax `$( ".selector" ).droppable( "option", { disabled: true } );`
8	widget Ta akcja zwraca obiekt jQuery zawierający element droppable. Ta metoda nie przyjmuje żadnych argumentów. Ta akcja zwraca obiekt jQuery zawierający element droppable. Ta metoda nie przyjmuje żadnych argumentów. Syntax `var widget = $( ".selector" ).droppable( "widget" );`

Przykład

Zobaczmy teraz przykład wykorzystujący akcje z powyższej tabeli. Poniższy przykład demonstruje użycie metody destru () .

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

Zapiszmy powyższy kod w pliku HTML dropexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe -

Jeśli upuścisz „przeciągnij1” na którykolwiek z elementów o nazwie „upuść tutaj”, zauważysz, że ten element zostanie upuszczony, a ta akcja całkowicie zniszczy możliwą do upuszczenia funkcjonalność elementu. Nie możesz ponownie upuścić "drag2" i "drag3" na tym elemencie.

Zarządzanie zdarzeniami na elementach do upuszczania

Oprócz metody droppable (options), którą widzieliśmy w poprzednich sekcjach, JqueryUI udostępnia metody zdarzeń, które są wyzwalane dla określonego zdarzenia. Te metody zdarzeń są wymienione poniżej -


$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
$(".selector").droppable(
   deactivate: function(event, ui) {}
);
$(".selector").droppable(
   drop: function(event, ui) {}
);
$(".selector").droppable(
   out: function(event, ui) {}
);
$(".selector").droppable(
   over: function(event, ui) {}
);

Sr.No.	Metoda i opis wydarzenia
1	aktywuj (zdarzenie, ui) To zdarzenie jest wyzwalane, gdy akceptowany element do przeciągania zaczyna się przeciągać. Może to być przydatne, jeśli chcesz, aby element, który można było upuścić, „zapalał się”. Event - activate(event, ui) To zdarzenie jest wyzwalane, gdy akceptowany element do przeciągania zaczyna się przeciągać. Może to być przydatne, jeśli chcesz, aby element, który można było upuścić, „zapalał się”. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Możliwe wartości interfejsu użytkownika to - draggable - Obiekt jQuery reprezentujący element do przeciągania. helper - Obiekt jQuery reprezentujący pomocnika, który jest przeciągany. position - Bieżąca pozycja CSS pomocnika do przeciągania jako {góra, lewo} obiekt. offset - Bieżąca pozycja przesunięcia pomocnika, który można przeciągać, jako obiekt {góra, lewo}. Syntax `$( ".selector" ).droppable({ activate: function( event, ui ) {} });`
2	create (event, ui) To zdarzenie jest wyzwalane, gdy tworzony jest element do upuszczania. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - create(event, ui) To zdarzenie jest wyzwalane, gdy tworzony jest element do upuszczania. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$( ".selector" ).droppable({ create: function( event, ui ) {} });`
3	dezaktywować (zdarzenie, ui) To zdarzenie jest wyzwalane, gdy zaakceptowany element do przeciągania przestaje się przeciągać. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - deactivate(event, ui) To zdarzenie jest wyzwalane, gdy zaakceptowany element do przeciągania przestaje się przeciągać. Gdzie zdarzenie jest typu Zdarzenie , a interfejs użytkownika jest typu Obiekt, a możliwe typy to - draggable - Obiekt jQuery reprezentujący element do przeciągania. helper - Obiekt jQuery reprezentujący pomocnika, który jest przeciągany. position - Bieżąca pozycja CSS pomocnika do przeciągania jako {góra, lewo} obiekt. offset - Bieżąca pozycja przesunięcia pomocnika, który można przeciągać, jako obiekt {góra, lewo}. Syntax `$(".selector").droppable( deactivate: function(event, ui) {} );`
4	drop (zdarzenie, ui) Ta akcja jest wyzwalana, gdy element zostanie upuszczony na droppable. Opiera się to na opcji tolerancji . Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - drop(event, ui) Ta akcja jest wyzwalana, gdy element zostanie upuszczony na droppable. Opiera się to na opcji tolerancji . Gdzie zdarzenie jest typu Zdarzenie , a interfejs użytkownika jest typu Obiekt, a możliwe typy to - draggable - Obiekt jQuery reprezentujący element do przeciągania. helper - Obiekt jQuery reprezentujący pomocnika, który jest przeciągany. position - Bieżąca pozycja CSS pomocnika do przeciągania jako {góra, lewo} obiekt. offset - Bieżąca pozycja przesunięcia pomocnika, który można przeciągać, jako obiekt {góra, lewo}. Syntax `$(".selector").droppable( drop: function(event, ui) {} );`
5	out (zdarzenie, ui) To zdarzenie jest wyzwalane, gdy akceptowany element do przeciągania zostanie wyciągnięty z elementu możliwego do upuszczenia. Opiera się to na opcji tolerancji . Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - out(event, ui) To zdarzenie jest wyzwalane, gdy akceptowany element do przeciągania jest wyciągany z elementu do upuszczania. Opiera się to na opcji tolerancji . Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$(".selector").droppable( out: function(event, ui) {} );`
6	ponad (zdarzenie, ui) To zdarzenie jest wyzwalane, gdy akceptowany element do przeciągania zostanie przeciągnięty nad element, który można przeciągać. Opiera się to na opcji tolerancji . Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - over(event, ui) To zdarzenie jest wyzwalane, gdy akceptowany element do przeciągania zostanie przeciągnięty nad element, który można przeciągać. Opiera się to na opcji tolerancji . Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object., A możliwe typy to - draggable - Obiekt jQuery reprezentujący element do przeciągania. helper - Obiekt jQuery reprezentujący pomocnika, który jest przeciągany. position - Bieżąca pozycja CSS pomocnika do przeciągania jako {góra, lewo} obiekt. offset - Bieżąca pozycja przesunięcia pomocnika, który można przeciągać, jako obiekt {góra, lewo}. Syntax `$(".selector").droppable( over: function(event, ui) {} );`

Przykład

Poniższy przykład ilustruje użycie metody zdarzenia podczas funkcji upuszczania. Ten przykład demonstruje użycie zdarzeń drop , over and 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>

Zapiszmy powyższy kod w pliku HTML dropexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe -

Tutaj zauważysz, jak zmienia się wiadomość w elemencie do upuszczania podczas przeciągania elementu.