जक्वेरी - ड्रूपेबल

jQueryUI प्रदान करता है droppable() किसी निर्दिष्ट लक्ष्य (ड्रैग करने योग्य तत्वों के लिए एक लक्ष्य) पर किसी भी डोम तत्व को छोड़ने योग्य बनाने की विधि।

वाक्य - विन्यास

droppable() विधि का उपयोग दो रूपों में किया जा सकता है -

$ (चयनकर्ता, संदर्भ)। विश्वसनीय (विकल्प) विधि
$ (चयनकर्ता, संदर्भ)। विश्वसनीय ("कार्रवाई", परम) विधि

$ (चयनकर्ता, संदर्भ)। विश्वसनीय (विकल्प) विधि

Droppable (विकल्प) विधि घोषणा करता है कि किसी HTML तत्व एक तत्व है जिसमें आप अन्य तत्वों ड्रॉप कर सकते हैं के रूप में इस्तेमाल किया जा सकता। विकल्प पैरामीटर एक उद्देश्य यह है कि इसमें शामिल तत्वों के व्यवहार निर्दिष्ट करता है।

वाक्य - विन्यास

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

आप जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करके एक समय में एक या अधिक विकल्प प्रदान कर सकते हैं। यदि एक से अधिक विकल्प प्रदान किए जाने हैं, तो आप उन्हें निम्नानुसार अल्पविराम का उपयोग करके अलग कर देंगे -

$(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* इस विकल्प का उपयोग तब किया जाता है जब आपको नियंत्रित करने की आवश्यकता होती है कि कौन से ड्रैग करने योग्य तत्वों को छोड़ने के लिए स्वीकार किया जाना है। डिफ़ॉल्ट रूप से इसका मूल्य है* इसका अर्थ है कि प्रत्येक वस्तु को छोड़ने योग्य द्वारा स्वीकार किया जाता है। यह प्रकार का हो सकता है - Selector - यह प्रकार इंगित करता है कि कौन से ड्रैग करने योग्य तत्व स्वीकार किए जाते हैं। Function- पेज पर प्रत्येक ड्रैग करने योग्य तत्व के लिए कॉलबैक फ़ंक्शन को कॉल किया जाएगा। यह फ़ंक्शन सही होना चाहिए, यदि ड्रैगबल तत्व को ड्रॉपपेबल द्वारा स्वीकार किया जाता है। Syntax `$( ".selector" ).droppable( { accept: ".special" } );`
2	activeClass यह विकल्प एक स्ट्रिंग है जिसमें एक या अधिक सीएसएस वर्गों का प्रतिनिधित्व किया जा सकता है, जब इसे एक स्वीकृत तत्व ( विकल्प में दर्शाए गए लोगों में से एक ) में जोड़ा जा सकता है । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - activeClass यह विकल्प एक स्ट्रिंग है जिसमें एक या अधिक सीएसएस वर्गों का प्रतिनिधित्व किया जा सकता है, जब इसे एक स्वीकृत तत्व ( विकल्प में दर्शाए गए लोगों में से एक ) में जोड़ा जा सकता है । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax `$( ".selector" ).droppable( { activeClass: "ui-state-highlight" } );`
3	addClasses यह विकल्प जब असत्य पर सेट होता है, तो ui-droppable क्लास को ड्रापेबल तत्वों में जोड़े जाने से रोक देगा । डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - addClasses यह विकल्प जब असत्य पर सेट होता है, तो ui-droppable क्लास को ड्रापेबल तत्वों में जोड़े जाने से रोक देगा । डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। यह कॉल करते समय प्रदर्शन अनुकूलन के रूप में वांछित हो सकता है । सैकड़ों तत्वों पर .roppable () init। Syntax `$( ".selector" ).droppable( { addClasses: false } );`
4	विकलांग यह विकल्प जब सही पर सेट किया जा सकता है, तो यह अक्षम हो जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - disabled यह विकल्प जब सही पर सेट करने योग्य को अक्षम करता है अर्थात निर्दिष्ट तत्वों पर आइटम की गति को निष्क्रिय करता है और उन तत्वों को छोड़ता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax `$( ".selector" ).droppable( { disabled: true } );`
5	लालची इस विकल्प का उपयोग तब किया जाता है जब आपको यह नियंत्रित करने की आवश्यकता होती है कि नेस्टेड ड्रापेबल्स पर छोड़ने के लिए कौन से ड्रैगबल तत्वों को स्वीकार किया जाना है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। यदि यह विकल्प सही पर सेट है , तो किसी भी मूल ड्रॉप-अप को तत्व प्राप्त नहीं होगा। Option - greedy इस विकल्प का उपयोग तब किया जाता है जब आपको यह नियंत्रित करने की आवश्यकता होती है कि नेस्टेड ड्रापेबल्स पर छोड़ने के लिए कौन से ड्रैगबल तत्वों को स्वीकार किया जाना है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। यदि यह विकल्प सही पर सेट है , तो किसी भी मूल ड्रॉप-अप को तत्व प्राप्त नहीं होगा। Syntax `$( ".selector" ).droppable( { greedy: true } );`
6	hoverClass यह विकल्प स्ट्रिंग का प्रतिनिधित्व करने के लिए एक या एक से अधिक सीएसएस वर्गों को जोड़ने योग्य के तत्व में जोड़ा जाता है जब एक स्वीकृत तत्व ( विकल्प में संकेतित एक तत्व ) इसमें चला जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - hoverClass यह विकल्प स्ट्रिंग का प्रतिनिधित्व करने के लिए एक या एक से अधिक सीएसएस वर्गों को जोड़ने योग्य के तत्व में जोड़ा जाता है जब एक स्वीकृत तत्व ( विकल्प में संकेतित एक तत्व ) इसमें चला जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax `$( ".selector" ).droppable( { hoverClass: "drop-hover" } );`
7	क्षेत्र इस विकल्प का उपयोग केवल ड्रैग करने योग्य तत्वों की ड्रॉप करने योग्य कार्रवाई को उन आइटमों तक सीमित करने के लिए किया जाता है जिनके पास समान विकल्प हैं। सीप (ड्रैगेबल (विकल्प) में परिभाषित)। डिफ़ॉल्ट रूप से इसका मूल्य है"default"। Option - scope इस विकल्प का उपयोग केवल ड्रैग करने योग्य तत्वों की ड्रॉप करने योग्य कार्रवाई को उन आइटमों तक सीमित करने के लिए किया जाता है जिनके पास समान विकल्प हैं। सीप (ड्रैगेबल (विकल्प) में परिभाषित)। डिफ़ॉल्ट रूप से इसका मूल्य है"default"। Syntax `$( ".selector" ).droppable( { scope: "tasks" } );`
8	सहनशीलता यह विकल्प एक स्ट्रिंग है जो परीक्षण के लिए उपयोग करने के लिए कौन सी मोड निर्दिष्ट करता है कि क्या ड्रैगगबल ड्रापेबल पर मँडरा रहा है। डिफ़ॉल्ट रूप से इसका मूल्य है"intersect"। Option - tolerance यह विकल्प एक स्ट्रिंग है जो निर्दिष्ट करता है कि ड्रैग करने योग्य तत्व को स्वीकार किए जाने वाले ड्रॉप के लिए ड्रॉप करने योग्य तत्व को कैसे कवर करना चाहिए। डिफ़ॉल्ट रूप से इसका मूल्य है"intersect"। संभावित मूल्य हैं - fit - ड्रैगबल में ड्रापेबल तत्व को पूर्ण रूप से शामिल किया गया है। intersect - ड्रैगनेबल दोनों दिशाओं में कम से कम 50% ड्रापेबल तत्व को ओवरलैप करता है। pointer - माउस पॉइंटर ड्रापेबल एलिमेंट को ओवरलैप करता है। touch - ड्रैग करने योग्य किसी भी मात्रा में स्पर्श करने योग्य बूंद को ओवरलैप करता है। Syntax `$( ".selector" ).droppable( { tolerance: "fit" } );`

निम्न अनुभाग आपको ड्रॉप कार्यक्षमता के कुछ कार्य उदाहरण दिखाएगा।

डिफ़ॉल्ट कार्यशीलता

निम्न उदाहरण ड्रापेबल कार्यक्षमता का एक सरल उदाहरण प्रदर्शित करता है, जिसमें कोई पैरामीटर नहीं है 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>

अब तत्व को "टॉलरेंस टच" पर छोड़ दें! बॉक्स (बस इस बॉक्स के किनारे को स्पर्श करें) और लक्ष्य तत्व के परिवर्तन देखें। अब "टॉलरेंस फिट" पर तत्व को गिराने के लिए! लक्ष्य, ड्रैग करने योग्य तत्व को लक्ष्य तत्व को पूरी तरह से ओवरलैप करना होगा अर्थात "सहिष्णुता फिट!" लक्ष्य।

गिराए जाने वाले तत्वों को चुनें

निम्न उदाहरण विकल्प के उपयोग को दर्शाता है 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और इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट देखना चाहिए। अब आप आउटपुट के साथ खेल सकते हैं -

यहाँ आप देख सकते हैं कि आप केवल "जापान" लक्ष्य पर "जापान के लोग" तत्व को छोड़ सकते हैं और लक्ष्य भारत पर "भारत के लोग" तत्व को छोड़ सकते हैं। सिमिलरी का दायरा "जो लोग जावा सीखना चाहते हैं" "जावा" और "जो लोग स्प्रिंग सीखना चाहते हैं" को "स्प्रिंग टारगेट" पर सेट करना है।

उपस्थिति का प्रबंधन

निम्न उदाहरण विकल्पों के उपयोग को प्रदर्शित करता है 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 ( "कार्रवाई", पैरामीटर) विधि ऐसे 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	सक्षम यह क्रिया ड्रापेबल ऑपरेशन को सक्रिय करती है। तत्वों को फिर से एक droppable तत्व प्राप्त हो सकता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - enable यह क्रिया ड्रापेबल ऑपरेशन को सक्रिय करती है। तत्वों को फिर से एक droppable तत्व प्राप्त हो सकता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$( ".selector" ).droppable("enable");`
4	विकल्प इस क्रिया को वर्तमान ड्रापेबल विकल्पों हैश का प्रतिनिधित्व करने वाली कुंजी / मान जोड़े वाली एक वस्तु मिलती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - option इस क्रिया को वर्तमान ड्रापेबल विकल्पों हैश का प्रतिनिधित्व करने वाली कुंजी / मान जोड़े वाली एक वस्तु मिलती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `var options = $( ".selector" ).droppable( "option" );`
5	विकल्प (विकल्पनाम) इस क्रिया को निर्दिष्ट विकल्पनाम के साथ वर्तमान में संबंधित ड्रॉप करने योग्य तत्व का मान प्राप्त होता है । यह एक स्ट्रिंग मान को तर्क के रूप में लेता है। Action - option( optionName ) इस क्रिया को निर्दिष्ट विकल्पनाम के साथ वर्तमान में संबंधित ड्रॉप करने योग्य तत्व का मान प्राप्त होता है । यह एक स्ट्रिंग मान को तर्क के रूप में लेता है। Syntax `var isDisabled = $( ".selector" ).droppable( "option", "disabled" );`
6	विकल्प (विकल्पनाम, मान) यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े ड्रॉप करने योग्य विकल्प का मान निर्धारित करती है । Action - option( optionName, value ) यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े ड्रॉप करने योग्य विकल्प का मान निर्धारित करती है । तर्क विकल्पनाम सेट किए जाने वाले विकल्प का नाम है और विकल्प के लिए निर्धारित मूल्य मान है। Syntax `$( ".selector" ).droppable( "option", "disabled", true );`
7	विकल्प (विकल्प) यह क्रिया ड्रापेबल के लिए एक या अधिक विकल्प सेट करती है। तर्क विकल्प सेट करने के लिए विकल्प-मूल्य जोड़े का एक नक्शा है। Action - option( options ) यह क्रिया ड्रापेबल के लिए एक या अधिक विकल्प सेट करती है। तर्क विकल्प सेट करने के लिए विकल्प-मूल्य जोड़े का एक नक्शा है। Syntax `$( ".selector" ).droppable( "option", { disabled: true } );`
8	विजेट यह क्रिया एक jQuery ऑब्जेक्ट देता है जिसमें ड्रापेबल तत्व होता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। यह क्रिया एक jQuery ऑब्जेक्ट देता है जिसमें ड्रापेबल तत्व होता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `var widget = $( ".selector" ).droppable( "widget" );`

उदाहरण

अब हम उपरोक्त तालिका से क्रियाओं का उपयोग करके एक उदाहरण देखते हैं। निम्न उदाहरण विनाश () विधि के उपयोग को दर्शाता है ।

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

यदि आप "ड्रैग 1" को "ड्रॉप यहाँ" नामक किसी भी तत्व पर छोड़ते हैं, तो आप देखेंगे कि यह तत्व गिरा हुआ है और इस क्रिया से एक तत्व की पूरी तरह से कार्यक्षमता समाप्त हो जाती है। आप फिर से इस तत्व पर "ड्रैग 2" और "ड्रैग 3" को नहीं छोड़ सकते।

टपकने योग्य तत्वों पर इवेंट मैनेजमेंट

ड्रापेबल (विकल्प) पद्धति के अलावा जो हमने पिछले खंडों में देखी थी, जेक्वेरीयू इवेंट विधियों को प्रदान करती है जो किसी विशेष घटना के लिए ट्रिगर हो जाती है। ये घटना विधियाँ नीचे सूचीबद्ध हैं -


$( ".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	सक्रिय करें (घटना, यूआई) इस घटना को ट्रिगर किया जाता है जब स्वीकृत ड्रैग करने योग्य तत्व खींचना शुरू कर देता है। यह उपयोगी हो सकता है यदि आप ड्रापेबल को "लाइट अप" करना चाहते हैं जब इसे गिराया जा सकता है। Event - activate(event, ui) इस घटना को ट्रिगर किया जाता है जब स्वीकृत ड्रैग करने योग्य तत्व खींचना शुरू कर देता है। यह उपयोगी हो सकता है यदि आप ड्रापेबल "लाइट अप" बनाना चाहते हैं जब इसे गिराया जा सकता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं - draggable - ड्रैग करने योग्य तत्व का प्रतिनिधित्व करने वाला एक jQuery ऑब्जेक्ट। helper - एक jQuery ऑब्जेक्ट उस सहायक का प्रतिनिधित्व करता है जिसे खींचा जा रहा है। position - ड्रैगबल सहायक की वर्तमान सीएसएस स्थिति {शीर्ष, बाएं} ऑब्जेक्ट के रूप में। offset - ड्रैगबल हेल्पर की करंट ऑफसेट स्थिति {टॉप, लेफ्ट} ऑब्जेक्ट के रूप में। Syntax `$( ".selector" ).droppable({ activate: function( event, ui ) {} });`
2	बनाएं (ईवेंट, यूआई) इस घटना को ट्रिगर किया जाता है जब एक ड्रापेबल तत्व बनाया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - create(event, ui) इस घटना को ट्रिगर किया जाता है जब एक ड्रापेबल तत्व बनाया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$( ".selector" ).droppable({ create: function( event, ui ) {} });`
3	निष्क्रिय करें (घटना, यूआई) इस घटना को ट्रिगर किया जाता है जब एक स्वीकार्य ड्रैगबल खींचना बंद कर देता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - deactivate(event, ui) इस घटना को ट्रिगर किया जाता है जब एक स्वीकार्य ड्रैगबल खींचना बंद कर देता है। जहाँ घटना प्रकार की घटना है , और ui प्रकार की है वस्तु और संभव प्रकार हैं - draggable - ड्रैग करने योग्य तत्व का प्रतिनिधित्व करने वाला एक jQuery ऑब्जेक्ट। helper - एक jQuery ऑब्जेक्ट उस सहायक का प्रतिनिधित्व करता है जिसे खींचा जा रहा है। position - ड्रैगबल सहायक की वर्तमान सीएसएस स्थिति {शीर्ष, बाएं} ऑब्जेक्ट के रूप में। offset - ड्रैगबल हेल्पर की करंट ऑफसेट स्थिति {टॉप, लेफ्ट} ऑब्जेक्ट के रूप में। Syntax `$(".selector").droppable( deactivate: function(event, ui) {} );`
4	ड्रॉप (घटना, यूआई) जब किसी तत्व को ड्रापेबल पर गिराया जाता है तो यह क्रिया शुरू हो जाती है। यह सहिष्णुता विकल्प पर आधारित है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - drop(event, ui) जब किसी तत्व को ड्रापेबल पर गिराया जाता है तो यह क्रिया शुरू हो जाती है। यह सहिष्णुता विकल्प पर आधारित है। जहाँ घटना प्रकार की घटना है , और ui प्रकार की है वस्तु और संभव प्रकार हैं - draggable - ड्रैग करने योग्य तत्व का प्रतिनिधित्व करने वाला एक jQuery ऑब्जेक्ट। helper - एक jQuery ऑब्जेक्ट उस सहायक का प्रतिनिधित्व करता है जिसे खींचा जा रहा है। position - ड्रैगबल सहायक की वर्तमान सीएसएस स्थिति {शीर्ष, बाएं} ऑब्जेक्ट के रूप में। offset - ड्रैगबल हेल्पर की करंट ऑफसेट स्थिति {टॉप, लेफ्ट} ऑब्जेक्ट के रूप में। Syntax `$(".selector").droppable( drop: function(event, ui) {} );`
5	बाहर (घटना, यूआई) इस घटना को ट्रिगर किया जाता है जब एक स्वीकृत ड्रैगबल तत्व को ड्रापेबल से बाहर खींच लिया जाता है। यह सहिष्णुता विकल्प पर आधारित है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - out(event, ui) जब कोई स्वीकृत ड्रैगबल तत्व ड्रापेबल से बाहर खींचा जाता है तो थिए घटना होती है। यह सहिष्णुता विकल्प पर आधारित है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$(".selector").droppable( out: function(event, ui) {} );`
6	ओवर (घटना, यूआई) इस घटना को ट्रिगर किया जाता है जब एक स्वीकार्य ड्रैगेबल तत्व को ड्रापेबल पर खींचा जाता है। यह सहिष्णुता विकल्प पर आधारित है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - over(event, ui) इस घटना को ट्रिगर किया जाता है जब एक स्वीकार्य ड्रैगेबल तत्व को ड्रापेबल पर खींचा जाता है। यह सहिष्णुता विकल्प पर आधारित है। जहाँ घटना प्रकार की घटना है , और ui प्रकार की वस्तु है । और संभव प्रकार निम्न हैं - draggable - ड्रैग करने योग्य तत्व का प्रतिनिधित्व करने वाला एक jQuery ऑब्जेक्ट। helper - एक jQuery ऑब्जेक्ट उस सहायक का प्रतिनिधित्व करता है जिसे खींचा जा रहा है। position - ड्रैगबल सहायक की वर्तमान सीएसएस स्थिति {शीर्ष, बाएं} ऑब्जेक्ट के रूप में। 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>

यहां आप देखेंगे कि ड्रॉपडबल तत्व में संदेश कैसे बदलता है क्योंकि आप तत्व को खींचते हैं।