JqueryUI - หยดได้

jQueryUI ให้ droppable() วิธีการทำให้องค์ประกอบ DOM หยดลงในเป้าหมายที่ระบุ (เป้าหมายสำหรับองค์ประกอบที่ลากได้)

ไวยากรณ์

droppable() วิธีการสามารถใช้ได้สองรูปแบบ -

$ (ตัวเลือกบริบท) .droppable (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .droppable ("action", params) Method

$ (ตัวเลือกบริบท) .droppable (ตัวเลือก) วิธีการ

วิธีdroppable (ตัวเลือก)ประกาศว่าองค์ประกอบ HTML สามารถใช้เป็นองค์ประกอบที่คุณสามารถวางองค์ประกอบอื่น ๆ ได้ ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุพฤติกรรมขององค์ประกอบที่เกี่ยวข้อง

ไวยากรณ์

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

คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

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

ตารางต่อไปนี้แสดงตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".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" }
);

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	ยอมรับ ตัวเลือกนี้ใช้เมื่อคุณต้องการควบคุมองค์ประกอบที่ลากได้ที่จะได้รับการยอมรับในการวาง โดยค่าเริ่มต้นคือ . Option - accept* ตัวเลือกนี้ใช้เมื่อคุณต้องการควบคุมองค์ประกอบที่ลากได้ที่จะได้รับการยอมรับในการวาง โดยค่าเริ่มต้นคือ* หมายความว่าทุกรายการได้รับการยอมรับโดย droppable สิ่งนี้สามารถเป็นประเภท - Selector - ประเภทนี้ระบุว่ายอมรับองค์ประกอบที่ลากได้ Function- ฟังก์ชันการโทรกลับจะถูกเรียกใช้สำหรับแต่ละองค์ประกอบที่ลากได้ในหน้า ฟังก์ชันนี้ควรคืนค่าจริงหากองค์ประกอบที่ลากได้ได้รับการยอมรับโดย droppable Syntax `$( ".selector" ).droppable( { accept: ".special" } );`
2	activeClass อ็อพชันนี้เป็นสตริงที่แสดงถึงคลาส CSS อย่างน้อยหนึ่งคลาสที่จะถูกเพิ่มลงในองค์ประกอบ droppable เมื่อมีการลากองค์ประกอบที่ยอมรับ (หนึ่งในองค์ประกอบที่ระบุไว้ในoptions.accept ) โดยค่าเริ่มต้นคือfalse. Option - activeClass อ็อพชันนี้เป็นสตริงที่แสดงถึงคลาส CSS อย่างน้อยหนึ่งคลาสที่จะถูกเพิ่มลงในองค์ประกอบ droppable เมื่อมีการลากองค์ประกอบที่ยอมรับ (หนึ่งในองค์ประกอบที่ระบุไว้ในoptions.accept ) โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).droppable( { activeClass: "ui-state-highlight" } );`
3	addClasses ตัวเลือกนี้เมื่อตั้งค่าเป็นเท็จจะป้องกันไม่ให้เพิ่มคลาสui-droppableลงในองค์ประกอบ droppable โดยค่าเริ่มต้นคือtrue. Option - addClasses ตัวเลือกนี้เมื่อตั้งค่าเป็นเท็จจะป้องกันไม่ให้เพิ่มคลาสui-droppableลงในองค์ประกอบ droppable โดยค่าเริ่มต้นคือtrue. สิ่งนี้อาจต้องการเป็นการเพิ่มประสิทธิภาพเมื่อเรียก . droppable () init บนองค์ประกอบหลายร้อยรายการ Syntax `$( ".selector" ).droppable( { addClasses: false } );`
4	ปิดการใช้งาน ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะปิดใช้งาน droppable โดยค่าเริ่มต้นคือfalse. Option - disabled ตัวเลือกนี้เมื่อตั้งค่าเป็น trueจะปิดการใช้งาน droppable เช่นปิดใช้งานการเคลื่อนที่ของไอเท็มเหนือองค์ประกอบที่ระบุและดรอปลงในองค์ประกอบเหล่านั้น โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).droppable( { disabled: true } );`
5	โลภ ตัวเลือกนี้ใช้เมื่อคุณต้องการควบคุมว่าจะยอมรับองค์ประกอบที่ลากได้ใดในการวางบน droppables ที่ซ้อนกัน โดยค่าเริ่มต้นคือfalse. หากตั้งค่าตัวเลือกนี้เป็นจริง droppables แม่ใด ๆ จะไม่ได้รับองค์ประกอบ Option - greedy ตัวเลือกนี้ใช้เมื่อคุณต้องการควบคุมว่าจะยอมรับองค์ประกอบที่ลากได้ใดในการวางบน droppables ที่ซ้อนกัน โดยค่าเริ่มต้นคือfalse. หากตั้งค่าตัวเลือกนี้เป็นจริง droppables แม่ใด ๆ จะไม่ได้รับองค์ประกอบ Syntax `$( ".selector" ).droppable( { greedy: true } );`
6	hoverClass อ็อพชันนี้เป็นString ที่แสดงถึงคลาส CSS อย่างน้อยหนึ่งคลาสที่จะถูกเพิ่มลงในองค์ประกอบของ droppable เมื่อองค์ประกอบที่ยอมรับ (องค์ประกอบที่ระบุในoptions.accept ) ย้ายเข้าไป โดยค่าเริ่มต้นคือfalse. Option - hoverClass อ็อพชันนี้เป็นString ที่แสดงถึงคลาส CSS อย่างน้อยหนึ่งคลาสที่จะถูกเพิ่มลงในองค์ประกอบของ droppable เมื่อองค์ประกอบที่ยอมรับ (องค์ประกอบที่ระบุในoptions.accept ) ย้ายเข้าไป โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).droppable( { hoverClass: "drop-hover" } );`
7	ขอบเขต อ็อพชันนี้ใช้เพื่อ จำกัด การดำเนินการที่หยดได้ขององค์ประกอบที่ลากได้เฉพาะกับรายการที่มีอ็อพชันเดียวกันสโคป (กำหนดในการลากได้ (ตัวเลือก)) โดยค่าเริ่มต้นคือ"default". Option - scope อ็อพชันนี้ใช้เพื่อ จำกัด การดำเนินการที่หยดได้ขององค์ประกอบที่ลากได้เฉพาะกับรายการที่มีอ็อพชันเดียวกันสโคป (กำหนดในการลากได้ (ตัวเลือก)) โดยค่าเริ่มต้นคือ"default". Syntax `$( ".selector" ).droppable( { scope: "tasks" } );`
8	ความอดทน ตัวเลือกนี้เป็นสตริงที่ระบุโหมดที่จะใช้สำหรับการทดสอบว่าการลากเลื่อนวางเมาส์เหนือหยดน้ำได้หรือไม่ โดยค่าเริ่มต้นคือ"intersect". Option - tolerance ตัวเลือกนี้เป็นสตริงที่ระบุว่าองค์ประกอบที่ลากได้ควรครอบคลุมองค์ประกอบที่หยดได้อย่างไรเพื่อให้การดร็อปได้รับการยอมรับ โดยค่าเริ่มต้นคือ"intersect". ค่าที่เป็นไปได้คือ - fit - Draggable ครอบคลุมองค์ประกอบที่หยดได้เต็มรูปแบบ intersect - ลากได้ซ้อนทับองค์ประกอบที่หยดได้อย่างน้อย 50% ในทั้งสองทิศทาง pointer - ตัวชี้เมาส์ซ้อนทับองค์ประกอบที่หยดได้ touch - ลากซ้อนทับกันหยดได้ทุกสัมผัส Syntax `$( ".selector" ).droppable( { tolerance: "fit" } );`

ส่วนต่อไปนี้จะแสดงตัวอย่างการทำงานของฟังก์ชันการดรอป

ฟังก์ชันเริ่มต้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวอย่างง่ายๆของฟังก์ชัน droppable โดยไม่ต้องส่งพารามิเตอร์ไปยัง droppable() วิธี.

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

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML dropexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

การใช้ addClass ปิดใช้งานและความอดทน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานสามตัวเลือก (a) addClass (b) disabled และ (c) tolerance ในฟังก์ชันดร็อปของ 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>

ตอนนี้วางองค์ประกอบบน "Tolerance Touch!" กล่อง (เพียงแตะที่ขอบของกล่องนี้) และดูการเปลี่ยนแปลงขององค์ประกอบเป้าหมาย ตอนนี้ให้วางองค์ประกอบใน "Tolerance Fit!" เป้าหมายองค์ประกอบที่ลากได้จะต้องทับซ้อนกับองค์ประกอบเป้าหมายอย่างเต็มที่นั่นคือ "Tolerance Fit!" เป้าหมาย

เลือกองค์ประกอบที่จะทิ้ง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือก accept และ scope ตัวเลือกในฟังก์ชันลากของ 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>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML dropexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับเอาต์พุต -

ที่นี่คุณจะเห็นว่าคุณสามารถวางองค์ประกอบ "ผู้คนจากญี่ปุ่น" เฉพาะเป้าหมาย "ญี่ปุ่น" และองค์ประกอบ "ผู้คนจากอินเดีย" ที่เป้าหมายในอินเดีย ขอบเขตของ "ผู้ที่ต้องการเรียนรู้ Java" จะกำหนดเป้าหมายเป็น "Java" และ "ผู้ที่ต้องการเรียนรู้ฤดูใบไม้ผลิ" เป็น "เป้าหมายฤดูใบไม้ผลิ"

การจัดการรูปลักษณ์

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือก activeClass และ hoverClass ของคลาส 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 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>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML dropexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ -

คุณสามารถสังเกตได้ว่าเมื่อลากหรือวางเมาส์เหนือเป้าหมาย (เหนือเป้าหมาย) ขององค์ประกอบ "ลากฉันไปที่เป้าหมายของฉัน" จะเปลี่ยนสีขององค์ประกอบเป้าหมาย "วางที่นี่"

$ (ตัวเลือกบริบท) .droppable ("action", params) Method

droppable ( "การกระทำ" params)วิธีการสามารถดำเนินการกับองค์ประกอบ droppable เช่นการป้องกันการทำงาน droppable การดำเนินการถูกระบุเป็นสตริงในอาร์กิวเมนต์แรก (เช่น "ปิดการใช้งาน" เพื่อป้องกันการตกหล่น) ตรวจสอบการดำเนินการที่สามารถส่งผ่านได้ในตารางต่อไปนี้

ไวยากรณ์

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

ตารางต่อไปนี้แสดงการดำเนินการต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".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" );

ซีเนียร์	การดำเนินการและคำอธิบาย
1	ทำลาย การดำเนินการนี้ทำลายฟังก์ชันการทำงานที่ลดลงได้ขององค์ประกอบโดยสิ้นเชิง องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Action - destroy การดำเนินการนี้ทำลายฟังก์ชันการทำงานที่ลดลงได้ขององค์ประกอบโดยสิ้นเชิง องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Syntax `$( ".selector" ).droppable("destroy");`
2	ปิดการใช้งาน การดำเนินการนี้ปิดใช้งานการดำเนินการที่ลดลงได้ องค์ประกอบไม่ใช่องค์ประกอบที่หยดน้ำได้อีกต่อไป วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - disable การดำเนินการนี้ปิดใช้งานการดำเนินการที่ลดลงได้ องค์ประกอบไม่ใช่องค์ประกอบที่หยดน้ำได้อีกต่อไป วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).droppable("disable");`
3	เปิดใช้งาน การดำเนินการนี้จะเปิดใช้งานการดำเนินการที่หยดได้อีกครั้ง องค์ประกอบสามารถรับองค์ประกอบที่หยดได้อีกครั้ง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - enable การดำเนินการนี้จะเปิดใช้งานการดำเนินการที่หยดได้อีกครั้ง องค์ประกอบสามารถรับองค์ประกอบที่หยดได้อีกครั้ง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).droppable("enable");`
4	ตัวเลือก การดำเนินการนี้ได้รับออบเจ็กต์ที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชอ็อพชันที่หยดได้ในปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - option การดำเนินการนี้ได้รับออบเจ็กต์ที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชอ็อพชันที่หยดได้ในปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `var options = $( ".selector" ).droppable( "option" );`
5	ตัวเลือก (optionName) การดำเนินการนี้ได้รับความคุ้มค่าขององค์ประกอบ droppable เชื่อมโยงกับที่ระบุOptionName สิ่งนี้ใช้ค่า String เป็นอาร์กิวเมนต์ Action - option( optionName ) การดำเนินการนี้ได้รับความคุ้มค่าขององค์ประกอบ droppable เชื่อมโยงกับที่ระบุOptionName สิ่งนี้ใช้ค่า String เป็นอาร์กิวเมนต์ Syntax `var isDisabled = $( ".selector" ).droppable( "option", "disabled" );`
6	ตัวเลือก (optionName ค่า) การกระทำนี้จะตั้งค่าของตัวเลือก droppable ที่เกี่ยวข้องกับที่ระบุOptionName Action - option( optionName, value ) การกระทำนี้จะตั้งค่าของตัวเลือก droppable ที่เกี่ยวข้องกับที่ระบุOptionName อาร์กิวเมนต์optionNameคือชื่อของตัวเลือกที่จะตั้งค่าและค่าคือค่าที่จะกำหนดให้กับอ็อพชัน Syntax `$( ".selector" ).droppable( "option", "disabled", true );`
7	option (ตัวเลือก) การดำเนินการนี้เป็นการตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับ droppable ตัวเลือกอาร์กิวเมนต์คือแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Action - option( options ) การดำเนินการนี้เป็นการตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับ droppable ตัวเลือกอาร์กิวเมนต์คือแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Syntax `$( ".selector" ).droppable( "option", { disabled: true } );`
8	วิดเจ็ต การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบ droppable วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบ droppable วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `var widget = $( ".selector" ).droppable( "widget" );`

ตัวอย่าง

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เมธอด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>

หากคุณวาง "drag1" ลงบนองค์ประกอบใด ๆ ที่ชื่อว่า "drop here" คุณจะสังเกตเห็นว่าองค์ประกอบนี้หลุดออกไปและการกระทำนี้จะทำลายฟังก์ชันการทำงานที่หยดได้ขององค์ประกอบโดยสิ้นเชิง คุณไม่สามารถวาง "drag2" และ "drag3" บนองค์ประกอบนี้ได้อีก

การจัดการเหตุการณ์เกี่ยวกับองค์ประกอบที่หยดได้

นอกเหนือจากวิธี droppable (ตัวเลือก) ที่เราเห็นในส่วนก่อนหน้านี้ JqueryUI ยังมีวิธีการเหตุการณ์ที่จะถูกทริกเกอร์สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -


$( ".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) {}
);

ซีเนียร์	วิธีการและคำอธิบายเหตุการณ์
1	เปิดใช้งาน (เหตุการณ์, UI) เหตุการณ์นี้จะเกิดขึ้นเมื่อองค์ประกอบที่ลากได้ที่ยอมรับได้เริ่มลาก สิ่งนี้จะมีประโยชน์หากคุณต้องการทำให้หยดน้ำ "สว่างขึ้น" เมื่อสามารถทิ้งลงได้ Event - activate(event, ui) เหตุการณ์นี้จะเกิดขึ้นเมื่อองค์ประกอบที่ลากได้ที่ยอมรับได้เริ่มลาก สิ่งนี้จะมีประโยชน์หากคุณต้องการทำให้หยดน้ำ "สว่างขึ้น" เมื่อสามารถทิ้งลงได้ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - draggable - วัตถุ jQuery ที่แสดงองค์ประกอบที่ลากได้ helper - วัตถุ jQuery ที่เป็นตัวแทนของตัวช่วยที่ถูกลาก position - ตำแหน่ง CSS ปัจจุบันของตัวช่วยลากเป็นวัตถุ {บนซ้าย} offset - ตำแหน่งออฟเซ็ตปัจจุบันของตัวช่วยลากเป็นวัตถุ {ด้านบนซ้าย} Syntax `$( ".selector" ).droppable({ activate: function( event, ui ) {} });`
2	สร้าง (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสร้างองค์ประกอบที่หยดได้ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - create(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสร้างองค์ประกอบที่หยดได้ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$( ".selector" ).droppable({ create: function( event, ui ) {} });`
3	ปิดใช้งาน (เหตุการณ์, UI) เหตุการณ์นี้จะเกิดขึ้นเมื่อการลากที่ยอมรับได้หยุดลาก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - deactivate(event, ui) เหตุการณ์นี้จะเกิดขึ้นเมื่อการลากที่ยอมรับได้หยุดลาก โดยที่เหตุการณ์เป็นประเภทเหตุการณ์และuiเป็นประเภทวัตถุและประเภทที่เป็นไปได้คือ - draggable - วัตถุ jQuery ที่แสดงองค์ประกอบที่ลากได้ helper - วัตถุ jQuery ที่เป็นตัวแทนของตัวช่วยที่ถูกลาก position - ตำแหน่ง CSS ปัจจุบันของตัวช่วยลากเป็นวัตถุ {บนซ้าย} offset - ตำแหน่งออฟเซ็ตปัจจุบันของตัวช่วยลากเป็นวัตถุ {ด้านบนซ้าย} Syntax `$(".selector").droppable( deactivate: function(event, ui) {} );`
4	ลดลง (เหตุการณ์, UI) การดำเนินการนี้จะเกิดขึ้นเมื่อองค์ประกอบถูกทิ้งลงบนหยดน้ำ ทั้งนี้ขึ้นอยู่กับตัวเลือกความอดทน ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - drop(event, ui) การดำเนินการนี้จะเกิดขึ้นเมื่อองค์ประกอบถูกทิ้งลงบนหยดน้ำ ทั้งนี้ขึ้นอยู่กับตัวเลือกความอดทน โดยที่เหตุการณ์เป็นประเภทเหตุการณ์และuiเป็นประเภทวัตถุและประเภทที่เป็นไปได้คือ - draggable - วัตถุ jQuery ที่แสดงองค์ประกอบที่ลากได้ helper - วัตถุ jQuery ที่เป็นตัวแทนของตัวช่วยที่ถูกลาก position - ตำแหน่ง CSS ปัจจุบันของตัวช่วยลากเป็นวัตถุ {บนซ้าย} offset - ตำแหน่งออฟเซ็ตปัจจุบันของตัวช่วยลากเป็นวัตถุ {ด้านบนซ้าย} Syntax `$(".selector").droppable( drop: function(event, ui) {} );`
5	ออก (เหตุการณ์, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อองค์ประกอบที่ลากได้ที่ยอมรับได้ถูกลากออกจากหยดน้ำ ทั้งนี้ขึ้นอยู่กับตัวเลือกความอดทน ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - out(event, ui) เหตุการณ์ที่ถูกทริกเกอร์เมื่อองค์ประกอบที่ลากได้ที่ยอมรับได้ถูกลากออกจากหยดน้ำ ทั้งนี้ขึ้นอยู่กับตัวเลือกความอดทน ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$(".selector").droppable( out: function(event, ui) {} );`
6	มากกว่า (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อองค์ประกอบที่ลากได้ที่ยอมรับได้ถูกลากไปเหนือหยดน้ำ ทั้งนี้ขึ้นอยู่กับตัวเลือกความอดทน ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - over(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อองค์ประกอบที่ลากได้ที่ยอมรับได้ถูกลากไปเหนือหยดน้ำ ทั้งนี้ขึ้นอยู่กับตัวเลือกความอดทน โดยที่เหตุการณ์เป็นประเภทเหตุการณ์และuiเป็นประเภทวัตถุและประเภทที่เป็นไปได้คือ - draggable - วัตถุ jQuery ที่แสดงองค์ประกอบที่ลากได้ helper - วัตถุ jQuery ที่เป็นตัวแทนของตัวช่วยที่ถูกลาก position - ตำแหน่ง CSS ปัจจุบันของตัวช่วยลากเป็นวัตถุ {บนซ้าย} offset - ตำแหน่งออฟเซ็ตปัจจุบันของตัวช่วยลากเป็นวัตถุ {ด้านบนซ้าย} Syntax `$(".selector").droppable( over: function(event, ui) {} );`

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานวิธีเหตุการณ์ระหว่างฟังก์ชันการดร็อป ตัวอย่างนี้แสดงให้เห็นถึงการใช้งานของเหตุการณ์ที่เกิดขึ้นลดลง , เหนือและออก

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

ที่นี่คุณจะสังเกตเห็นว่าข้อความในองค์ประกอบที่หยดได้เปลี่ยนไปอย่างไรเมื่อคุณลากองค์ประกอบ