script.aculo.us - ड्रैग एंड ड्रॉप

वेब 2.0 इंटरफ़ेस की सबसे लोकप्रिय विशेषता ड्रैग एंड ड्रॉप सुविधा है। सौभाग्य से script.aculo.us ड्रैग और ड्रॉप का समर्थन करने की एक अंतर्निहित क्षमता के साथ आता है।

Script.aculo.us की ड्रैगिंग क्षमताओं का उपयोग करने के लिए, आपको लोड को लोड करना होगा dragdrop मॉड्यूल, जिसके लिए भी आवश्यकता होती है effectsमापांक। तो आपके लिए script.aculo.us की न्यूनतम लोडिंग इस तरह होगी:

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

चीजों को घसीटना

Script.aculo.us का उपयोग करके किसी आइटम को ड्रैग करने योग्य बनाना बहुत सरल है। इसके लिए ड्रैगएबल श्रेणी का एक उदाहरण बनाने की आवश्यकता होती है , और एलिमेंट को ड्रैग करने योग्य बनाने की पहचान की जाती है।

खींचने योग्य सिंटैक्स

new Draggable( element, options );

कंस्ट्रक्टर के लिए पहला पैरामीटर तत्व की पहचान या तो एलिमेंट को आईडी के तत्व के रूप में या तत्व के संदर्भ में किया जाता है। दूसरा पैरामीटर ड्रैग करने योग्य तत्व को कैसे व्यवहार करना है, इस पर वैकल्पिक जानकारी निर्दिष्ट करता है।

ड्रैग करने योग्य विकल्प

आप अपनी ड्रैग करने योग्य वस्तु को बनाते समय निम्नलिखित विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।

विकल्प	विवरण	उदाहरण
वापस लाएं	यदि सही पर सेट किया जाता है , तो ड्रैग समाप्त होने पर तत्व अपनी मूल स्थिति में लौट आता है। यह भी निर्दिष्ट करता है कि जब ड्रैग ऑपरेशन बंद हो जाता है तो क्या रिवरटेक्ट कॉलबैक को लागू किया जाएगा। झूठे की अवहेलना करता है ।	उदाहरण
स्नैप	एक ग्रिड में स्नैप करने या इसके संचलन के लिए विवश करने के लिए उपयोग किया जाता है। यदि झूठी (डिफ़ॉल्ट), कोई तड़क या बाधा उत्पन्न नहीं होती है। यदि इसे एक पूर्णांक x दिया जाता है, तो ड्रैगबल x पिक्सल्स के ग्रिड में स्नैप हो जाएगा। यदि एक सरणी [x, y], क्षैतिज ड्रैगिंग x पिक्सेल की ग्रिड में और ऊर्ध्वाधर y स्नैप से स्नैप करेगा। यह फ़ंक्शन (x, y, draggable) के अनुरूप भी एक फ़ंक्शन हो सकता है जो एक सरणी [x, y] देता है।	उदाहरण
zindex	ड्रैग ऑपरेशन के दौरान तत्व पर लागू किए जाने वाले CSS z-index को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से, तत्व का z-index ड्रैग करते समय 1000 पर सेट होता है।	उदाहरण
ghosting	बूलियन यह निर्धारित करता है कि क्या ड्रैग करने के लिए ड्रैग करने योग्य क्लोन किया जाना चाहिए, क्लोन छोड़ने तक मूल को छोड़कर। झूठे की अवहेलना करता है ।	उदाहरण
बाधा	एक स्ट्रिंग को ड्रैग करने योग्य दिशाओं को सीमित करने के लिए उपयोग किया जाता है, या तो क्षैतिज या ऊर्ध्वाधर । अशक्त करने के लिए चूक जिसका अर्थ है मुक्त आंदोलन।	उदाहरण
हैंडल	ड्रैग ऑपरेशन शुरू करने के लिए हैंडल के रूप में उपयोग किए जाने वाले एक तत्व को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से, एक तत्व अपना स्वयं का हैंडल है।	उदाहरण
starteffect	खींचने पर शुरू होने पर तत्व नामक एक प्रभाव। डिफ़ॉल्ट रूप से, यह तत्व की अपारदर्शिता को 0.2 से 0.2 सेकंड में बदल देता है।	उदाहरण
reverteffect	एक तत्व जिसे ड्रैग रिवर्ट होने पर बुलाया जाता है। तत्व की मूल स्थिति के लिए एक चिकनी स्लाइड के लिए चूक । केवल तभी वापस लौटा जब सच है।	उदाहरण
endeffect	एक तत्व जिसे ड्रैगिंग समाप्त होने पर बुलाया जाता है। डिफ़ॉल्ट रूप से, यह 0.2 सेकंड में तत्व की अपारदर्शिता को 1.0 में बदल देता है।	उदाहरण

कॉलबैक विकल्प

इसके अतिरिक्त, आप विकल्प पैरामीटर में निम्नलिखित कॉलबैक कार्यों में से किसी का उपयोग कर सकते हैं -

समारोह	विवरण	उदाहरण
onStart	खींचे जाने पर कॉल किया जाता है।	उदाहरण
onDrag	जब एक माउस चलता है तो बार-बार कॉल किया जाता है, अगर माउस की स्थिति पिछले कॉल से बदल जाती है।	उदाहरण
परिवर्तन	जिसे ऑनड्रैग कहा जाता है (जो पसंदीदा कॉलबैक है)।	उदाहरण
अंत में	एक ड्रैग समाप्त होने पर कॉल किया जाता है।	उदाहरण

"परिवर्तन" कॉलबैक को छोड़कर, इन कॉलबैक में से प्रत्येक दो मापदंडों को स्वीकार करता है: ड्रैगेबल ऑब्जेक्ट, और माउस इवेंट ऑब्जेक्ट।

खींचने योग्य उदाहरण

यहां, हम ऐसे 5 तत्वों को परिभाषित करते हैं, जिन्हें ड्रैग करने योग्य बनाया जाता है: तीन <div> तत्व, एक <img> तत्व, और एक <span> तत्व। तीन अलग-अलग <div> तत्वों का उद्देश्य यह प्रदर्शित करना है कि क्या कोई तत्व स्थैतिक (डिफ़ॉल्ट), सापेक्ष, या निरपेक्ष के एक स्थिति नियम से शुरू होता है, चाहे ड्रैग व्यवहार अप्रभावित हो।

<html>
   <head>
      <title>Draggables Elements</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         // Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
			
         // Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }			
      </script>
   </head>

   <body>
      <div id = "normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id = "relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id = "absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br />
		
      <img id = "image" src = "/images/scriptaculous.gif"/>

      <p>Let part <span id = "span" style = "color: blue;"> 
         This is middle part</span> Yes, only middle part is dragable.</p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -

घसीटती हुई चीजें

एक तत्व ड्राप्पबल्स नामक एक नामस्थान के भीतर कॉल () विधि के माध्यम से एक ड्रॉप लक्ष्य में परिवर्तित हो जाता है ।

: Droppables नाम स्थान दो महत्वपूर्ण तरीकों है ऐड () एक बूंद लक्ष्य बनाने के लिए, और निकालें () एक बूंद लक्ष्य दूर करने के लिए।

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

यहाँ ड्रॉप टारगेट बनाने के लिए ऐड () मेथड का सिंटेक्स है। ऐड () विधि दूसरे के रूप में पारित हैश में विकल्पों का उपयोग करते हुए, अपने पहले पैरामीटर के रूप में पारित तत्व से एक ड्रॉप लक्ष्य बनाता है।

Droppables.add( element, options );

हटाने के लिए सिंटैक्स () और भी सरल है। हटाने () विधि पारित तत्व से ड्रॉप लक्ष्य व्यवहार को हटा देती है।

Droppables.remove(element);

विकल्प

विकल्प	विवरण	उदाहरण
Hoverclass	सीएसएस वर्ग का नाम जिसे तत्व में जोड़ा जाएगा जबकि ड्रापेबल सक्रिय है (इसमें एक स्वीकार्य ड्रैगेबल होवर है)। अशक्त करने के लिए चूक।	उदाहरण
स्वीकार करना	CSS कक्षाओं का वर्णन करने वाली स्ट्रिंग या स्ट्रिंग की एक सरणी। ड्रॉप करने योग्य केवल ड्रैगगैबल्स को स्वीकार करेगा जिनके पास इन सीएसएस वर्गों में से एक या अधिक है।	उदाहरण
रोकथाम	एक तत्व, या तत्वों की सरणी को निर्दिष्ट करता है, जो कि ड्रॉप टार्गेट द्वारा स्वीकार किए जाने के लिए एक ड्रैग करने योग्य आइटम का माता-पिता होना चाहिए। डिफ़ॉल्ट रूप से, कोई भी बाधाएं लागू नहीं होती हैं।	उदाहरण
ओवरलैप	यदि 'क्षैतिज' या 'वर्टिकल' पर सेट किया जाता है, तो ड्रापेबल केवल ड्रैगएबल पर प्रतिक्रिया करेगा यदि दिए गए दिशा में 50% से अधिक ओवरलैपिंग हो। सॉर्टेबल्स द्वारा उपयोग किया जाता है, अगले अध्याय में चर्चा की गई है।
लालची	यदि सही (डिफ़ॉल्ट) है, तो यह ड्रैग करने योग्य नहीं खोजा जाएगा, के तहत अन्य छोटी बूंदों को मँडराता है।	उदाहरण

कॉलबैक विकल्प

समारोह	विवरण	उदाहरण
हॉवर पर	कॉलबैक फ़ंक्शन को निर्दिष्ट करता है जब एक उपयुक्त ड्रैगबल आइटम ड्रॉप टारगेट पर हो जाता है। सॉर्टेबल्स द्वारा उपयोग किया जाता है, अगले अध्याय में चर्चा की गई है।
onDrop	कॉलबैक फ़ंक्शन को निर्दिष्ट करता है जिसे ड्रॉप टारगेट पर उपयुक्त ड्रैग करने योग्य तत्व को कहा जाता है।	उदाहरण

उदाहरण

यहाँ, इस उदाहरण का पहला भाग हमारे पिछले उदाहरण के समान है, सिवाय इसके कि हमने प्रोटोटाइप के $ $ A () फ़ंक्शन का उपयोग सभी <img> तत्वों की नोड सूची को ड्रैगैबल्स की आईडी के साथ एक सरणी में बदलने के लिए किया है। ।

<html>
   <head>
      <title>Drag and Drop Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            // Make all the images draggables from draggables division.
				
            $A($('draggables').getElementsByTagName('img')).each(function(item) { new Draggable(item, {revert: true, ghosting: true}); }); Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem}); // Set drop area by default non cleared. $('droparea').cleared = false;
         }
   
         // The target drop area contains a snippet of instructional
         // text that we want to remove when the first item
         // is dropped into it.
			
         function moveItem( draggable,droparea){
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }
				
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>

      <style type = "text/css">
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }
			
         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }
			
         .hoverActive {
            background-color: #ffffcc;
         }
			
         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
      </style>
   </head>

   <body>
      <div id = "draggables">
         <img src = "/images/html.gif"/>
         <img src = "/images/css.gif"/>
         <img src = "/images/xhtml.gif"/>
         <img src = "/images/wml_logo.gif"/>
         <img src = "/images/javascript.gif"/>
      </div>

      <div id = "droparea">
         Drag and Drop Your Images in this area
      </div>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -