script.aculo.us - सॉर्टिंग एलिमेंट्स

कई बार, आपको उपयोगकर्ता को तत्वों (जैसे किसी सूची में आइटम) को पुन: खींचकर पुन: व्यवस्थित करने की क्षमता प्रदान करने की आवश्यकता होती है।

खींचें और ड्रॉप के बिना, पुन: क्रम एक बुरा सपना हो सकता है लेकिन script.aculo.us के माध्यम से बॉक्स से बाहर समर्थन को पुन: क्रम बढ़ाया प्रदान करता है क्रमित करने योग्य वर्ग। Sortable बनने के लिए तत्व Sortable नाम स्थान में बनाने () विधि के लिए पारित किया गया है ।

एक सॉर्टेबल में कंटेनर तत्व में आइटम तत्व होते हैं। जब आप एक नया Sortable बनाते हैं, तो वह संबंधित Draggables और Droppables के निर्माण का ख्याल रखता है ।

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>

छाँटे जाने योग्य वाक्य-विन्यास

यहाँ एक छांटने योग्य आइटम बनाने के लिए बनाएँ () विधि का वाक्यविन्यास है। Create () विधि लेता आईडी एक कंटेनर तत्व की और पारित विकल्पों के आधार पर उन्हें ठीक कर लेगा।

Sortable.create('id_of_container',[options]);

Sortable.create द्वारा बनाई गई Sortable करने के लिए सभी घटना संचालकों और संदर्भों को पूरी तरह से हटाने के लिए Sortable.destroy का उपयोग करें ।

NOTE- Sortable.create के लिए एक कॉल, कथित तौर पर Sortable.destroy पर कॉल अगर संदर्भित तत्व पहले से ही एक Sortable था। यहां विनाश फ़ंक्शन को कॉल करने के लिए सरल सिंटैक्स है।

Sortable.destroy( element );

छांटने का विकल्प

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

अनु क्रमांक	विकल्प और विवरण
1	tag ड्रैग और ड्रॉप के माध्यम से सॉर्ट करने योग्य सॉर्ट करने योग्य कंटेनर के भीतर तत्वों के प्रकार को निर्दिष्ट करता है। 'ली' के लिए चूक।
2	only एक सीएसएस श्रेणी का नाम या वर्ग के नाम की सरणी निर्दिष्ट करता है, कि एक ड्रैग करने योग्य आइटम को ड्रॉप लक्ष्य द्वारा स्वीकार किए जाने के लिए होना चाहिए। यह ड्रैगबल के स्वीकार विकल्प के समान है । डिफ़ॉल्ट रूप से, कोई वर्ग नाम की बाधाएँ लागू नहीं होती हैं।
3	overlap झूठी, क्षैतिज या ऊर्ध्वाधर में से एक । उस बिंदु को नियंत्रित करता है जिस पर एक पुन: व्यवस्थित किया जाता है। ऊर्ध्वाधर के लिए चूक ।
4	constraint झूठी, क्षैतिज या ऊर्ध्वाधर में से एक । घसीटे जाने योग्य छंटनी वाले तत्वों की गति को बाधित करता है। ऊर्ध्वाधर के लिए चूक ।
5	containment Sortables के बीच खींचने और छोड़ने में सक्षम करता है। तत्वों या तत्व-आईडी की एक सरणी लेता है। महत्वपूर्ण नोट: यह सुनिश्चित करने के लिए कि कंटेनरों के बीच दो तरह से खींच संभव है, कंटेनर तत्वों के बाद सभी Sortable.create कॉल रखें।
6	handle इसी नाम के ड्रैगबल विकल्प के रूप में भी, ड्रैग ऑपरेशंस आरंभ करने के लिए उपयोग किए जाने वाले एक तत्व को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से, प्रत्येक तत्व का अपना हैंडल होता है।
7	hoverclass निर्दिष्ट करता है कि सीएसएस वर्ग का नाम गैर-ड्रैग किए गए सॉर्टेबल तत्वों पर लागू किया जाए क्योंकि ड्रैग किया गया तत्व उनके ऊपर से गुजरता है। डिफ़ॉल्ट रूप से, कोई सीएसएस वर्ग नाम लागू नहीं किया जाता है।
8	ghosting समान नाम के ड्रैगबल विकल्प के समान, यदि सही है, तो यह विकल्प ड्रैग ऑपरेशन के मूल तत्व को जगह में रहने का कारण बनता है, जबकि माउस पॉइंटर के साथ तत्व की एक अर्ध-पारदर्शी प्रतिलिपि को स्थानांतरित किया जाता है। झूठे की अवहेलना । यह विकल्प IE के साथ काम नहीं करता है।
9	dropOnEmpty यदि सही है, तो यह एक खाली सूची पर सॉर्ट करने योग्य तत्वों को छोड़ने की अनुमति देता है। झूठे की अवहेलना ।
10	scroll यदि सीएसएस ओवरफ़्लो विशेषता की सेटिंग के कारण छांटने योग्य कंटेनर में स्क्रॉलबार होता है, तो यह विकल्प दृश्य तत्वों से परे सूची के ऑटो-स्क्रॉलिंग को सक्षम करता है। झूठे की अवहेलना करता है ।
12	scrollSensitivity जब स्क्रॉलिंग सक्षम होती है, तो यह उस बिंदु को समायोजित करता है जिस पर स्क्रॉल करना शुरू हो जाता है। 20 की कमी।
13	scrollSpeed स्क्रॉलिंग सक्षम होने पर, यह स्क्रॉल गति को समायोजित करता है। 15 से चूक।
14	tree यदि सही है, तो यह सॉर्ट करने योग्य तत्व के भीतर उप-तत्वों के साथ सॉर्टिंग को सक्षम करता है। झूठे की अवहेलना।
15	treeTag यदि ट्री विकल्प सक्षम है, तो यह उप-तत्व के कंटेनर तत्व प्रकार को निर्दिष्ट करता है, जिनके बच्चे सॉर्टेबल व्यवहार में भाग लेते हैं। 'उल' के लिए चूक।

आप विकल्प पैरामीटर में निम्नलिखित कॉलबैक प्रदान कर सकते हैं:

अनु क्रमांक	विकल्प और विवरण
1	onChange एक ऐसा फंक्शन जिसे ड्रैग करते समय क्रम क्रम बदल जाता है। जब एक सॉर्टेबल से दूसरे में खींचते हैं, तो कॉलबैक को प्रत्येक सॉर्टेबल पर एक बार बुलाया जाता है। प्रभावित तत्व को इसके पैरामीटर के रूप में प्राप्त करता है।
2	onUpdate एक फ़ंक्शन जिसे ड्रैग ऑपरेशन की समाप्ति पर बुलाया जाएगा, जिसके परिणामस्वरूप तत्व क्रम में बदलाव होगा।

छँटाई उदाहरण

इस डेमो को IE 6.0 में काम करने के लिए सत्यापित किया गया है। यह फ़ायरफ़ॉक्स के नवीनतम संस्करण में भी काम करता है।

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>
   
   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

उपरोक्त तालिका में चर्चा किए गए विभिन्न विकल्पों के साथ कोड की बेहतर समझ के लिए हमारे ऑनलाइन कंपाइलर का उपयोग करें।

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

टैग के उपयोग पर ध्यान दें : 'li' । इसी प्रकार, आप <div> - में उपलब्ध चित्रों की सूची को क्रमबद्ध कर सकते हैं।

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

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

क्रमबद्ध तत्वों को क्रमबद्ध करना

Sortable ऑब्जेक्ट HTTP GET या POST अनुरोध के लिए उपयुक्त प्रारूप में Sortable को क्रमबद्ध करने के लिए एक फ़ंक्शन Sortable.serialize () भी प्रदान करता है । इसका उपयोग एक अजाक्स कॉल के माध्यम से सॉर्टेबल के आदेश को प्रस्तुत करने के लिए किया जा सकता है।

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

Sortable.serialize(element, options);

विकल्प

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

अनु क्रमांक	विकल्प और विवरण
1	tag उस प्रकार के टैग सेट करता है, जिन्हें क्रमबद्ध किया जाएगा। यह Sortable.create में उपयोग किए जाने वाले समान होगा ।
2	name HTTP GET / POST प्रारूप में क्रमांकन के लिए कुंजी / मान युग्म बनाने के लिए उपयोग की जाने वाली कुंजी का नाम सेट करता है। तो अगर नाम xyz होना चाहिए, तो क्वेरी स्ट्रिंग जैसा दिखेगा - xyz [] = value1 & xyz [] = value2 & xyz [] = value3 जहां मानों को बाल तत्वों से प्राप्त किया जाता है, ताकि वे कंटेनर के भीतर दिखाई दें।

सीरियल्स उदाहरण

इस उदाहरण में, क्रमांकन का आउटपुट केवल सूची आइटम आईडी में अंडरस्कोर के बाद नंबर देगा।

कोशिश करने के लिए, सूचियों को उनके मूल क्रम में छोड़ दें, सूचियों के क्रमांकन को देखने के लिए बटन दबाएं। अब, कुछ तत्वों को फिर से ऑर्डर करें और फिर से बटन पर क्लिक करें।

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' + $(container).id + 
            ' is: <br/><pre>' + 
               Sortable.serialize( container,{ name:name} ) + 
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>	
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>
			
      <button type = "button" value = "Click Me" 
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

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

Sortables के बीच आइटम चल रहा है

निम्न उदाहरण दिखाता है कि आइटम को एक सूची से दूसरी सूची में कैसे स्थानांतरित किया जाए।

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>		
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

ध्यान दें कि प्रत्येक कंटेनर के लिए रोकथाम विकल्प दोनों कंटेनरों को रोकथाम तत्वों के रूप में सूचीबद्ध करता है। ऐसा करके, हमने बच्चे के तत्वों को उनके माता-पिता के संदर्भ में हल करने में सक्षम बनाया है; यह उन्हें दो कंटेनरों के बीच ले जाने में भी सक्षम बनाता है।

हम दोनों सूचियों के लिए सही पर dropOnEmpty सेट करते हैं। उस सूची पर इस विकल्प के प्रभाव को देखने के लिए, सभी तत्वों को एक सूची से दूसरी सूची में ले जाएं ताकि एक सूची खाली हो। आप पाएंगे कि यह खाली सूची पर तत्व छोड़ने की अनुमति दे रहा है।

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

अजाक्स से बांधना

बेशक, onUpdate सर्वर पर अजाक्स सूचनाओं को ट्रिगर करने के लिए एक प्रमुख उम्मीदवार है, उदाहरण के लिए जब उपयोगकर्ता एक टू-डू सूची या कुछ अन्य डेटा सेट को फिर से शुरू करता है। Ajax.Request और Sortable.serialize का संयोजन जीवंत दृढ़ता को सरल बनाता है -

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request 
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize एक स्ट्रिंग बनाता है जैसे: सूची [] = 1 और सूची [] = 2 और सूची [] = 3 और सूची [] = 4, जहां संख्या अंडरस्कोर के बाद सूची तत्व आईडी के पहचानकर्ता भाग हैं।

अब हमें file.php को कोड करना होगा, जो पोस्ट किए गए डेटा को parse_str ($ _ POST ['डेटा']) के रूप में पार्स करेगा ; और आप इस सॉर्ट किए गए डेटा के साथ जो करना चाहते हैं वह कर सकते हैं।

AJAX के बारे में अधिक जानने के लिए, कृपया हमारे सरल Ajax ट्यूटोरियल से गुजरें ।