JqueryUI - सॉर्टेबल
jQueryUI प्रदान करता है sortable()माउस का उपयोग करके सूची या ग्रिड में तत्वों को पुन: व्यवस्थित करने की विधि। यह विधि पहले पैरामीटर के रूप में पारित एक ऑपरेशन स्ट्रिंग के आधार पर सॉर्टेबिलिटी कार्रवाई करती है।
वाक्य - विन्यास
sortable () विधि का उपयोग दो रूपों में किया जा सकता है -
$ (चयनकर्ता, संदर्भ) .sortable (विकल्प) विधि
$ (चयनकर्ता, संदर्भ)। योग्य ("कार्रवाई", [परम]) विधि
$ (चयनकर्ता, संदर्भ) .sortable (विकल्प) विधि
Sortable (विकल्प) विधि घोषणा करता है कि किसी HTML तत्व विनिमेय तत्व शामिल हैं। विकल्प पैरामीटर एक उद्देश्य यह है कि उनका क्रम बदलने के दौरान शामिल तत्वों के व्यवहार निर्दिष्ट करता है।
वाक्य - विन्यास
$(selector, context).sortable(options);निम्न तालिका उन विभिन्न विकल्पों को सूचीबद्ध करती है जिनका उपयोग इस विधि के साथ किया जा सकता है -
| अनु क्रमांक। | विकल्प और विवरण |
|---|---|
| 1 | जोङना यह विकल्प उस तत्व को निर्दिष्ट करता है जिसमें नए तत्व को विकल्प के साथ बनाया गया था । चाल / खींच के समय के दौरान डाला जाएगा। डिफ़ॉल्ट रूप से इसका मूल्य हैparent। Option - appendTo यह विकल्प उस तत्व को निर्दिष्ट करता है जिसमें नए तत्व को विकल्प के साथ बनाया गया था । चाल / खींच के समय के दौरान डाला जाएगा। डिफ़ॉल्ट रूप से इसका मूल्य हैparent। यह प्रकार का हो सकता है -
Syntax |
| 2 | एक्सिस यह विकल्प आंदोलन के एक अक्ष को इंगित करता है ("x" क्षैतिज है, "y" ऊर्ध्वाधर है)। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - axis यह विकल्प आंदोलन के एक अक्ष को इंगित करता है ("x" क्षैतिज है, "y" ऊर्ध्वाधर है)। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 3 | रद्द करना इस विकल्प का उपयोग चयनकर्ता तत्वों में से किसी पर क्लिक करके तत्वों की छँटाई को रोकने के लिए किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य है"input,textarea,button,select,option"। Option - cancel इस विकल्प का उपयोग चयनकर्ता तत्वों में से किसी पर क्लिक करके तत्वों की छँटाई को रोकने के लिए किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य है"input,textarea,button,select,option"। Syntax |
| 4 | साथ जुडा हुआ यह विकल्प एक चयनकर्ता है जो किसी अन्य सॉर्टेबल तत्व की पहचान करता है जो इस सॉर्टेबल से आइटम स्वीकार कर सकता है। यह एक सूची से आइटम को अन्य सूचियों में स्थानांतरित करने की अनुमति देता है, एक लगातार और उपयोगी उपयोगकर्ता इंटरैक्शन। यदि छोड़ा गया है, तो कोई अन्य तत्व जुड़ा नहीं है। यह एकतरफा रिश्ता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - connectWith यह विकल्प एक चयनकर्ता है जो किसी अन्य सॉर्टेबल तत्व की पहचान करता है जो इस सॉर्टेबल से आइटम स्वीकार कर सकता है। यह एक सूची से आइटम को अन्य सूचियों में स्थानांतरित करने की अनुमति देता है, एक लगातार और उपयोगी उपयोगकर्ता इंटरैक्शन। यदि छोड़ा गया है, तो कोई अन्य तत्व जुड़ा नहीं है। यह एकतरफा रिश्ता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 5 | रोकथाम यह विकल्प एक ऐसे तत्व को इंगित करता है जिसके भीतर विस्थापन होता है। तत्व का चयन एक चयनकर्ता द्वारा किया जाएगा (सूची में केवल पहला आइटम माना जाएगा), एक DOM तत्व, या स्ट्रिंग "पैरेंट" (मूल तत्व) या "विंडो" (HTML पृष्ठ)। Option - containment यह विकल्प एक ऐसे तत्व को इंगित करता है जिसके भीतर विस्थापन होता है। यह प्रकार का हो सकता है -
Syntax |
| 6 | कर्सर जब तत्व चलता है तो कर्सर CSS संपत्ति निर्दिष्ट करता है। यह माउस पॉइंटर के आकार का प्रतिनिधित्व करता है। डिफ़ॉल्ट रूप से इसका मूल्य "ऑटो" है। Option - cursor जब तत्व चलता है तो कर्सर CSS संपत्ति निर्दिष्ट करता है। यह माउस पॉइंटर के आकार का प्रतिनिधित्व करता है। डिफ़ॉल्ट रूप से इसका मूल्य "ऑटो" है। संभावित मूल्य हैं -
Syntax |
| 7 | cursorAt माउस कर्सर के सापेक्ष खींचने वाले सहायक की ऑफसेट सेट करता है। निर्देशांक एक या दो कुंजी के संयोजन का उपयोग करके हैश के रूप में दिया जा सकता है: {शीर्ष, बाएं, दाएं, नीचे}। डिफ़ॉल्ट रूप से इसका मूल्य "गलत" है। Option - cursorAt माउस कर्सर के सापेक्ष खींचने वाले सहायक की ऑफसेट सेट करता है। निर्देशांक एक या दो कुंजी के संयोजन का उपयोग करके हैश के रूप में दिया जा सकता है: {शीर्ष, बाएं, दाएं, नीचे}। डिफ़ॉल्ट रूप से इसका मूल्य "गलत" है। Syntax |
| 8 | विलंब देरी, मिलीसेकंड में, जिसके बाद माउस के पहले आंदोलन को ध्यान में रखा जाता है। उस समय के बाद विस्थापन शुरू हो सकता है। डिफ़ॉल्ट रूप से इसका मान "0" है। Option - delay देरी, मिलीसेकंड में, जिसके बाद माउस के पहले आंदोलन को ध्यान में रखा जाता है। उस समय के बाद विस्थापन शुरू हो सकता है। डिफ़ॉल्ट रूप से इसका मान "0" है। Syntax |
| 9 | विकलांग यह विकल्प यदि सही पर सेट किया गया है , तो छांटने योग्य कार्यक्षमता अक्षम करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - disabled यह विकल्प यदि सही पर सेट किया गया है , तो छांटने योग्य कार्यक्षमता अक्षम करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 10 | दूरी पिक्सेल की संख्या जो छँटाई शुरू होने से पहले माउस को ले जाना चाहिए। यदि निर्दिष्ट किया गया है, तब तक छंटनी शुरू नहीं होगी जब तक कि माउस को दूरी से परे खींच नहीं लिया जाता है। डिफ़ॉल्ट रूप से इसका मान "1" है। Option - distance पिक्सेल की संख्या जो छँटाई शुरू होने से पहले माउस को ले जाना चाहिए। यदि निर्दिष्ट किया गया है, तब तक छंटनी शुरू नहीं होगी जब तक कि माउस को दूरी से परे खींच नहीं लिया जाता है। डिफ़ॉल्ट रूप से इसका मान "1" है। Syntax |
| 1 1 | dropOnEmpty यह विकल्प यदि गलत पर सेट किया गया है , तो इस तरह के आइटम को खाली कनेक्ट सॉर्टेबल पर नहीं छोड़ा जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - dropOnEmpty यह विकल्प यदि गलत पर सेट किया गया है , तो इस तरह के आइटम को खाली कनेक्ट सॉर्टेबल पर नहीं छोड़ा जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Syntax |
| 12 | forceHelperSize अगर यह विकल्प अगर सही पर सेट होता है तो सहायक को आकार देने के लिए मजबूर करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - forceHelperSize अगर यह विकल्प अगर सही पर सेट होता है तो सहायक को आकार देने के लिए मजबूर करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 13 | forcePlaceholderSize यह विकल्प जब सही पर सेट होता है , तो आइटम के ले जाने पर प्लेसहोल्डर के आकार को ध्यान में रखता है। यह विकल्प तभी उपयोगी है जब विकल्प । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - forcePlaceholderSize यह विकल्प जब सही पर सेट होता है , तो आइटम के ले जाने पर प्लेसहोल्डर के आकार को ध्यान में रखता है। यह विकल्प तभी उपयोगी है जब विकल्प । डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 14 | ग्रिड यह विकल्प एक एरे [x, y] है जो पिक्सेल की संख्या को दर्शाता है कि माउस के विस्थापन के दौरान छांटने वाला तत्व क्षैतिज और लंबवत चलता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - grid यह विकल्प एक एरे [x, y] है जो पिक्सेल की संख्या को दर्शाता है कि माउस के विस्थापन के दौरान छांटने वाला तत्व क्षैतिज और लंबवत चलता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 15 | हैंडल यदि निर्दिष्ट किया गया है, तब तक शुरू से प्रतिबंधित करें जब तक कि निर्दिष्ट तत्व (ओं) पर मूसडाउन न हो। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - handle यदि निर्दिष्ट किया गया है, तब तक शुरू से प्रतिबंधित करें जब तक कि निर्दिष्ट तत्व (ओं) पर मूसडाउन न हो। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 16 | सहायक प्रदर्शन को खींचने के लिए एक सहायक तत्व का उपयोग करने की अनुमति देता है। डिफ़ॉल्ट रूप से इसका मूल्य हैoriginal। Option - helper प्रदर्शन को खींचने के लिए एक सहायक तत्व का उपयोग करने की अनुमति देता है। डिफ़ॉल्ट रूप से इसका मूल्य हैoriginal। संभावित मूल्य हैं -
Syntax |
| 17 | आइटम यह विकल्प निर्दिष्ट करता है कि DOM एलिमेंट के अंदर किन आइटम्स को सॉर्ट किया जाना है। डिफ़ॉल्ट रूप से इसका मूल्य है> *। Option - items यह विकल्प निर्दिष्ट करता है कि DOM एलिमेंट के अंदर किन आइटम्स को सॉर्ट किया जाना है। डिफ़ॉल्ट रूप से इसका मूल्य है> * Syntax |
| 18 | अस्पष्टता इस विकल्प का उपयोग छँटाई करते समय सहायक की अस्पष्टता को परिभाषित करने के लिए किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - opacity इस विकल्प का उपयोग छँटाई करते समय सहायक की अस्पष्टता को परिभाषित करने के लिए किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 19 | प्लेसहोल्डर इस विकल्प का उपयोग वर्ग नाम के लिए किया जाता है जो अन्यथा सफेद स्थान पर लागू हो जाता है। लेकिन डिफ़ॉल्ट रूप से इसका मूल्य है false। Option - placeholder Syntax |
| 20 | वापस लाएं यह विकल्प तय करता है कि क्या छांटे गए आइटमों को एक चिकनी एनीमेशन का उपयोग करके अपने नए पदों पर वापस जाना चाहिए। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - revert यह विकल्प तय करता है कि क्या छांटे गए आइटमों को एक चिकनी एनीमेशन का उपयोग करके अपने नए पदों पर वापस जाना चाहिए। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax |
| 21 | स्क्रॉल स्क्रॉल करने में सक्षम करने के लिए इस विकल्प का उपयोग किया जाता है। यदि पृष्ठ पर सही है तो किनारे पर आते समय स्क्रॉल करें। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - scroll स्क्रॉल करने में सक्षम करने के लिए इस विकल्प का उपयोग किया जाता है। यदि पृष्ठ पर सही है तो किनारे पर आते समय स्क्रॉल करें। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Syntax |
| 22 | scrollSensitivity यह विकल्प बताता है कि स्क्रॉल करने के लिए माउस को दृश्य क्षेत्र से कितने पिक्सेल बाहर निकलना चाहिए। डिफ़ॉल्ट रूप से इसका मूल्य है20। यह विकल्प केवल विकल्प के साथ प्रयोग किया जाता है। सही पर सेट करें। Option - scrollSensitivity यह विकल्प बताता है कि स्क्रॉल करने के लिए माउस को दृश्य क्षेत्र से कितने पिक्सेल बाहर निकलना चाहिए। डिफ़ॉल्ट रूप से इसका मूल्य है20। यह विकल्प केवल विकल्प के साथ प्रयोग किया जाता है। सही पर सेट करें। Syntax |
| 23 | स्क्रोल गति स्क्रॉल शुरू होते ही यह विकल्प डिस्प्ले की स्क्रॉलिंग गति को इंगित करता है। डिफ़ॉल्ट रूप से इसका मूल्य है20। Option - scrollSpeed स्क्रॉल शुरू होते ही यह विकल्प डिस्प्ले की स्क्रॉलिंग गति को इंगित करता है। डिफ़ॉल्ट रूप से इसका मूल्य है20। Syntax |
| 24 | सहनशीलता यह विकल्प एक स्ट्रिंग है जो निर्दिष्ट करता है कि परीक्षण के लिए किस मोड का उपयोग किया जाना है कि क्या आइटम को स्थानांतरित किया जा रहा है या नहीं। डिफ़ॉल्ट रूप से इसका मूल्य है"intersect"। Option - tolerance यह विकल्प एक स्ट्रिंग है जो निर्दिष्ट करता है कि परीक्षण के लिए किस मोड का उपयोग किया जाना है कि क्या आइटम को स्थानांतरित किया जा रहा है या नहीं। डिफ़ॉल्ट रूप से इसका मूल्य है"intersect"। संभावित मान हैं -
Syntax |
| 25 | zindex यह विकल्प सॉर्ट किए जाने के दौरान एलिमेंट / हेल्पर के लिए z- इंडेक्स का प्रतिनिधित्व करता है। डिफ़ॉल्ट रूप से इसका मूल्य है1000। Option - zIndex यह विकल्प सॉर्ट किए जाने के दौरान एलिमेंट / हेल्पर के लिए जेड-इंडेक्स का प्रतिनिधित्व करता है। डिफ़ॉल्ट रूप से इसका मूल्य है1000। Syntax |
निम्नलिखित अनुभाग आपको ड्रैग फंक्शनलिटी के कुछ कार्य उदाहरण दिखाएगा।
डिफ़ॉल्ट कार्यक्षमता
निम्न उदाहरण क्रमागत कार्यक्षमता का एक सरल उदाहरण प्रदर्शित करता है, जिसमें कोई पैरामीटर नहीं है sortable() तरीका।
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</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>
#sortable-1 { list-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-1" ).sortable();
});
</script>
</head>
<body>
<ul id = "sortable-1">
<li class = "default">Product 1</li>
<li class = "default">Product 2</li>
<li class = "default">Product 3</li>
<li class = "default">Product 4</li>
<li class = "default">Product 5</li>
<li class = "default">Product 6</li>
<li class = "default">Product 7</li>
</ul>
</body>
</html>आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं sortexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट देखना चाहिए। अब, आप परिणाम के साथ खेल सकते हैं -
उपरोक्त उत्पादों को फिर से व्यवस्थित करें, आइटमों को खींचने के लिए माउस का उपयोग करें।
विकल्प देरी और दूरी का उपयोग
निम्न उदाहरण तीन विकल्पों के उपयोग को दर्शाता है (a) delay तथा (b) distance JqueryUI के प्रकार समारोह में।
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</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>
#sortable-2, #sortable-3 { list-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-2" ).sortable({
delay:500
});
$( "#sortable-3" ).sortable({
distance:30
});
});
</script>
</head>
<body>
<h3>Delay by 500ms</h3>
<ul id = "sortable-2">
<li class = "default">Product 1</li>
<li class = "default">Product 2</li>
<li class = "default">Product 3</li>
<li class = "default">Product 4</li>
</ul>
<h3>Distance Delay by 30px</h3>
<ul id = "sortable-3">
<li class = "default">Product 1</li>
<li class = "default">Product 2</li>
<li class = "default">Product 3</li>
<li class = "default">Product 4</li>
</ul>
</body>
</html>आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं sortexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट देखना चाहिए। अब, आप परिणाम के साथ खेल सकते हैं -
उपरोक्त उत्पादों को फिर से व्यवस्थित करें, आइटमों को खींचने के लिए माउस का उपयोग करें। देरी (समय) या दूरी के आधार पर आकस्मिक छँटाई को रोकने के लिए, हमने कई मिलिसेकंड निर्धारित किए हैं जो देरी विकल्प के साथ शुरू होने से पहले तत्व को खींचने की जरूरत है । हमने पिक्सल्स में एक दूरी भी तय कर ली है, जिस एलिमेंट को डिस्टेंस ऑप्शन से शुरू करने से पहले ड्रैग करना होगा ।
प्लेसहोल्डर का उपयोग
निम्न उदाहरण तीन विकल्प के उपयोग को दर्शाता है placeholder JqueryUI के प्रकार समारोह में।
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</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>
#sortable-4 { list-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.highlight {
border: 1px solid red;
font-weight: bold;
font-size: 45px;
background-color: #333333;
}
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-4" ).sortable({
placeholder: "highlight"
});
});
</script>
</head>
<body>
<ul id = "sortable-4">
<li class = "default">Product 1</li>
<li class = "default">Product 2</li>
<li class = "default">Product 3</li>
<li class = "default">Product 4</li>
<li class = "default">Product 5</li>
<li class = "default">Product 6</li>
<li class = "default">Product 7</li>
</ul>
</body>
</html>आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं sortexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट देखना चाहिए। अब, आप परिणाम के साथ खेल सकते हैं -
आइटमों को पुन: व्यवस्थित करने के लिए उन्हें खींचने का प्रयास करें, जबकि आप आइटमों को खींच रहे हैं, प्लेसहोल्डर (हमने इस स्थान को स्टाइल करने के लिए हाइलाइट क्लास का उपयोग किया है) एक उपलब्ध स्थान पर दिखाई देगा।
ऑप्शंस कनेक्टविथ एंड ड्रापेनमॉप्टी का उपयोग
निम्न उदाहरण तीन विकल्पों के उपयोग को दर्शाता है (a) connectWith तथा (b) dropOnEmpty JqueryUI के प्रकार समारोह में।
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</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>
#sortable-5, #sortable-6,#sortable-7 {
list-style-type: none; margin: 0; padding: 0;
width: 20%;float:left }
#sortable-5 li, #sortable-6 li,#sortable-7 li {
margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-5, #sortable-6" ).sortable({
connectWith: "#sortable-5, #sortable-6"
});
$( "#sortable-7").sortable({
connectWith: "#sortable-5",
dropOnEmpty: false
});
});
</script>
</head>
<body>
<ul id = "sortable-5"><h3>List 1</h3>
<li class = "default">A</li>
<li class = "default">B</li>
<li class = "default">C</li>
<li class = "default">D</li>
</ul>
<ul id = "sortable-6"><h3>List 2</h3>
<li class = "default">a</li>
<li class = "default">b</li>
<li class = "default">c</li>
<li class = "default">d</li>
</ul>
<ul id = "sortable-7"><h3>List 3</h3>
<li class = "default">e</li>
<li class = "default">f</li>
<li class = "default">g</li>
<li class = "default">h</li>
</ul>
</body>
</html>आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं sortexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट देखना चाहिए। अब, आप परिणाम के साथ खेल सकते हैं -
ConnectWith विकल्प में एक चयनकर्ता पास करके, एक List1 से दूसरे (List2) और इसके विपरीत में आइटम सॉर्ट करें । यह एक सीएसएस वर्ग के साथ सभी संबंधित सूचियों को समूहीकृत करने के द्वारा किया जाता है, और फिर उस वर्ग को सॉर्टेबल फ़ंक्शन (यानी, कनेक्टविथ: '# सॉर्टेबल -5, # सॉर्टेबल -6') में पास किया जाता है।
आइटम 3 को सूची 2 या सूची 1 के अंतर्गत खींचने की कोशिश करें। जैसा कि हमने ड्रॉपऑन खाली विकल्प को गलत पर सेट किया है , इन वस्तुओं को गिराना संभव नहीं होगा।
$ (चयनकर्ता, संदर्भ)। योग्य ("कार्रवाई", [परम]) विधि
Sortable (कार्रवाई, पैरामीटर) विधि इस तरह के विस्थापन को रोकने के लिए के रूप में sortable तत्वों, पर कोई क्रिया कर सकते हैं। action पहले तर्क में एक स्ट्रिंग के रूप में निर्दिष्ट किया गया है और वैकल्पिक रूप से, एक या अधिक params दिए गए कार्रवाई के आधार पर प्रदान किया जा सकता है।
मूल रूप से, यहां क्रियाएं कुछ भी नहीं हैं, लेकिन वे jQuery के तरीके हैं जिन्हें हम स्ट्रिंग के रूप में उपयोग कर सकते हैं।
वाक्य - विन्यास
$(selector, context).sortable ("action", [params]);निम्न तालिका इस पद्धति के कार्यों को सूचीबद्ध करती है -
| अनु क्रमांक। | कार्रवाई और विवरण |
|---|---|
| 1 | रद्द करना() यह क्रिया वर्तमान सॉर्ट ऑपरेशन को रद्द कर देती है। यह प्राप्त करने और छांटने की घटनाओं को रोकने के लिए हैंडलर के भीतर सबसे उपयोगी है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - cancel() वर्तमान सॉर्ट ऑपरेशन रद्द करता है। यह प्राप्त करने और छांटने की घटनाओं को रोकने के लिए हैंडलर के भीतर सबसे उपयोगी है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax |
| 2 | नष्ट () यह क्रिया पूरी तरह से सॉर्टेबिलिटी कार्यक्षमता को हटा देती है। यह तत्व को अपनी पूर्व-स्थिति पर वापस लौटा देगा। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - destroy() यह क्रिया पूरी तरह से सॉर्टेबिलिटी कार्यक्षमता को हटा देती है। यह तत्व को अपनी पूर्व-स्थिति पर वापस लौटा देगा। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax |
| 3 | अक्षम () यह क्रिया लिपटे सेट में किसी भी छांटने वाले तत्वों की स्थिरता को अक्षम कर देती है। तत्वों की छँटाई को हटाया नहीं जाता है और इस पद्धति के सक्षम संस्करण को कॉल करके पुनर्स्थापित किया जा सकता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - disable() यह क्रिया लिपटे सेट में किसी भी छांटने वाले तत्वों की स्थिरता को अक्षम कर देती है। तत्वों की छँटाई को हटाया नहीं जाता है और इस पद्धति के सक्षम संस्करण को कॉल करके पुनर्स्थापित किया जा सकता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax |
| 4 | (सक्षम करें) लिपटे सेट में किसी भी सॉर्ट करने योग्य तत्वों पर पुन: सक्षमता को सक्षम करता है जिनकी सॉर्टिबिलिटी को अक्षम कर दिया गया है। ध्यान दें कि यह विधि किसी भी गैर-छांटने वाले तत्वों के साथ संगतता नहीं जोड़ेगी। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - enable() लिपटे सेट में किसी भी सॉर्ट करने योग्य तत्वों पर पुन: सक्षमता को सक्षम करता है जिनकी सॉर्टिबिलिटी को अक्षम कर दिया गया है। ध्यान दें कि यह विधि किसी भी गैर-छांटने वाले तत्वों के साथ संगतता नहीं जोड़ेगी। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax |
| 5 | विकल्प (विकल्पनाम) यह क्रिया वर्तमान में निर्दिष्ट विकल्प के साथ संबद्ध मान प्राप्त करती है । जहां विकल्पनाम पाने के विकल्प का नाम है। Action - option( optionName ) यह क्रिया वर्तमान में निर्दिष्ट विकल्प के साथ संबद्ध मान प्राप्त करती है । जहां विकल्पनाम पाने के विकल्प का नाम है। Syntax |
| 6 | विकल्प () एक वस्तु मिलती है जिसमें कुंजी / मान जोड़े होते हैं जो वर्तमान सॉर्ट करने योग्य विकल्पों का प्रतिनिधित्व करते हैं .. यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - option() एक वस्तु मिलती है जिसमें कुंजी / मान जोड़े होते हैं जो वर्तमान सॉर्ट करने योग्य विकल्पों का प्रतिनिधित्व करते हैं .. यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax |
| 7 | विकल्प (विकल्पनाम, मान) यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े सॉर्टेबल विकल्प का मान सेट करती है । जहां विकल्पनाम सेट करने के लिए विकल्प का नाम है और विकल्प के लिए सेट करने के लिए मूल्य मूल्य है। Action - option( optionName, value ) यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े सॉर्टेबल विकल्प का मान सेट करती है । जहां विकल्पनाम सेट करने के लिए विकल्प का नाम है और विकल्प के लिए सेट करने के लिए मूल्य मूल्य है। Syntax |
| 8 | विकल्प (विकल्प) सॉर्ट करने के लिए एक या अधिक विकल्प सेट करता है। जहां विकल्प सेट करने के लिए विकल्प-मूल्य जोड़े का एक नक्शा है। Action - option( options ) सॉर्ट करने के लिए एक या अधिक विकल्प सेट करता है। जहां विकल्प सेट करने के लिए विकल्प-मूल्य जोड़े का एक नक्शा है। Syntax |
| 9 | ताज़ा () यह क्रिया आवश्यक होने पर वस्तुओं की सूची को ताज़ा करती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। इस पद्धति को कॉल करने से पहचाने जाने योग्य सॉर्ट करने के लिए जोड़े गए नए आइटम हो जाएंगे। Action - refresh() यह क्रिया आवश्यक होने पर वस्तुओं की सूची को ताज़ा करती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। इस पद्धति को कॉल करने से पहचाने जाने योग्य सॉर्ट करने के लिए जोड़े गए नए आइटम हो जाएंगे। Syntax |
| 10 | ऐरे (विकल्प) यह विधि क्रमबद्ध क्रम में तत्वों के आईडी मानों की एक सरणी देता है । यह विधि विकल्प के रूप में क्रमांकन या क्रमबद्ध क्रम को अनुकूलित करने के लिए लेती है । Action - toArray( options ) यह विधि क्रमबद्ध क्रम में तत्वों के आईडी मानों की एक सरणी देता है । यह विधि विकल्प के रूप में क्रमांकन या क्रमबद्ध क्रम को अनुकूलित करने के लिए लेती है । Syntax |
| 1 1 | क्रमबद्ध करें (विकल्प) यह विधि क्रमबद्ध से निर्मित क्रमबद्ध क्वेरी स्ट्रिंग (अजाक्स के माध्यम से सबमिटेबल) देता है। Action - serialize( options ) यह विधि क्रमबद्ध से निर्मित क्रमबद्ध क्वेरी स्ट्रिंग (अजाक्स के माध्यम से सबमिटेबल) देता है। यह "setname_number" प्रारूप में प्रत्येक आइटम की आईडी को देखकर डिफ़ॉल्ट रूप से काम करता है, और यह "setname [] = संख्या और setname [] = संख्या" जैसे हैश का उपयोग करता है। Syntax |
| 12 | refreshPositions () इस पद्धति का उपयोग ज्यादातर आंतरिक रूप से छांटे गए कैश्ड जानकारी को ताज़ा करने के लिए किया जाता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - refreshPositions() इस पद्धति का उपयोग ज्यादातर आंतरिक रूप से छांटे गए कैश्ड जानकारी को ताज़ा करने के लिए किया जाता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax |
| 13 | विजेट () यह विधि एक jQuery वस्तु देता है जिसमें सॉर्टेबल तत्व होता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - widget() यह विधि एक jQuery वस्तु देता है जिसमें सॉर्टेबल तत्व होता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax |
उदाहरण
अब हम उपरोक्त तालिका से क्रियाओं का उपयोग करके एक उदाहरण देखते हैं। निम्न उदाहरण Array (विकल्प) विधि के उपयोग को प्रदर्शित करता है ।
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</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>
#sortable-8{ list-style-type: none; margin: 0;
padding: 0; width: 25%; float:left;}
#sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$('#sortable-8').sortable({
update: function(event, ui) {
var productOrder = $(this).sortable('toArray').toString();
$("#sortable-9").text (productOrder);
}
});
});
</script>
</head>
<body>
<ul id = "sortable-8">
<li id = "1" class = "default">Product 1</li>
<li id = "2" class = "default">Product 2</li>
<li id = "3" class = "default">Product 3</li>
<li id = "4" class = "default">Product 4</li>
</ul>
<br>
<h3><span id = "sortable-9"></span></h3>
</body>
</html>आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं sortexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट देखना चाहिए। अब, आप परिणाम के साथ खेल सकते हैं -
आइटमों को क्रमबद्ध करने का प्रयास करें, मदों का क्रम नीचे दिखाया गया है। यहां हम $ (यह) .sortable ('toArray') कह रहे हैं । toString () , जो सभी आइटम आईडी की एक स्ट्रिंग सूची देगा, ऐसा लग सकता है1,2,3,4।
सॉर्टेबल एलिमेंट्स पर इवेंट मैनेजमेंट
क्रमबद्ध (विकल्प) विधि के अलावा जो हमने पिछले खंडों में देखी थी, JqueryUI घटना के तरीके प्रदान करता है जो किसी विशेष घटना के लिए ट्रिगर हो जाता है। ये घटना विधियाँ नीचे सूचीबद्ध हैं -
| अनु क्रमांक। | घटना विधि और विवरण |
|---|---|
| 1 | सक्रिय करें (घटना, यूआई) यह इवेंट सॉर्टेबल पर तब ट्रिगर किया जाता है जब कनेक्टेड सॉर्टेबल पर एक तरह का ऑपरेशन शुरू होता है। Event - activate(event, ui) यह इवेंट सॉर्टेबल पर तब ट्रिगर किया जाता है जब कनेक्टेड सॉर्टेबल पर एक तरह का ऑपरेशन शुरू होता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 2 | पहले (घटना, ui) इस घटना को ट्रिगर किया जाता है जब सॉर्ट ऑपरेशन समाप्त होने वाला है, सहायक और प्लेसहोल्डर तत्व संदर्भ अभी भी मान्य है। Event - beforeStop(event, ui) इस घटना को ट्रिगर किया जाता है जब सॉर्ट ऑपरेशन समाप्त होने वाला है, सहायक और प्लेसहोल्डर तत्व संदर्भ अभी भी मान्य है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 3 | परिवर्तन (घटना, यूआई) यह ईवेंट तब ट्रिगर किया जाता है जब सॉर्ट किया गया तत्व DOM के भीतर स्थिति बदलता है। Event - change(event, ui) यह ईवेंट तब ट्रिगर किया जाता है जब सॉर्ट किया गया तत्व DOM के भीतर स्थिति बदलता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 4 | बनाएं (ईवेंट, यूआई) जब सॉर्टेबल बनाया जाता है, तो यह ईवेंट ट्रिगर हो जाता है। Event - create(event, ui) जब सॉर्टेबल बनाया जाता है, तो यह ईवेंट ट्रिगर हो जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई ऑब्जेक्ट खाली है लेकिन अन्य घटनाओं के साथ संगतता के लिए शामिल है। Syntax |
| 5 | निष्क्रिय करें (घटना, यूआई) जब कनेक्टेड सॉर्ट बंद हो जाता है, तो कनेक्टेड सॉर्ट करने के लिए प्रचारित होने पर यह घटना शुरू हो जाती है। Event - deactivate(event, ui) जब कनेक्टेड सॉर्ट बंद हो जाता है, तो कनेक्टेड सॉर्ट करने के लिए प्रचारित होने पर यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 6 | बाहर (घटना, यूआई) यह इवेंट तब चालू हो जाता है जब किसी आइटम को किसी कनेक्ट की गई सूची से दूर ले जाया जाता है। Event - out(event, ui) यह इवेंट तब चालू हो जाता है जब किसी आइटम को किसी कनेक्ट की गई सूची से दूर ले जाया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 7 | ओवर (घटना, यूआई) जब कोई आइटम किसी कनेक्ट की गई सूची में चला जाता है तो यह घटना शुरू हो जाती है। Event - over(event, ui) जब कोई आइटम किसी कनेक्ट की गई सूची में चला जाता है तो यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 8 | प्राप्त करें (ईवेंट, यूआई) इस घटना को ट्रिगर किया जाता है जब किसी कनेक्ट की गई सूची को किसी अन्य सूची से सॉर्ट आइटम मिला है। Event - receive(event, ui) इस घटना को ट्रिगर किया जाता है जब किसी कनेक्ट की गई सूची को किसी अन्य सूची से सॉर्ट आइटम मिला है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 9 | निकालें (घटना, यूआई) यह आइटम तब जुड़ा होता है जब किसी कनेक्टेड सूची से सॉर्ट आइटम हटा दिया जाता है और उसे दूसरे में खींच लिया जाता है। Event - remove(event, ui) यह आइटम तब जुड़ा होता है जब किसी कनेक्टेड सूची से सॉर्ट आइटम हटा दिया जाता है और उसे दूसरे में खींच लिया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 10 | सॉर्ट (ईवेंट, यूआई) इस घटना को एक बार ऑपरेशन के दौरान मूसमोव घटनाओं के लिए बार-बार ट्रिगर किया जाता है। Event - sort(event, ui) इस घटना को एक बार ऑपरेशन के दौरान मूसमोव घटनाओं के लिए बार-बार ट्रिगर किया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 1 1 | प्रारंभ (घटना, यूआई) यह घटना तब शुरू होती है जब एक प्रकार का ऑपरेशन शुरू होता है। Event - start(event, ui) यह घटना तब शुरू होती है जब एक प्रकार का ऑपरेशन शुरू होता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 12 | स्टॉप (घटना, यूआई) यह घटना तब चालू हो जाती है जब एक प्रकार का ऑपरेशन संपन्न हो जाता है। Event - stop(event, ui) यह घटना तब चालू हो जाती है जब एक प्रकार का ऑपरेशन संपन्न हो जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
| 13 | अद्यतन (घटना, यूआई) यह घटना तब चालू हो जाती है जब एक प्रकार का संचालन बंद हो जाता है और आइटम की स्थिति बदल दी जाती है। Event - update(event, ui) यह घटना तब चालू हो जाती है जब एक प्रकार का संचालन बंद हो जाता है और आइटम की स्थिति बदल दी जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं -
Syntax |
उदाहरण
निम्न उदाहरण ड्रॉप कार्यक्षमता के दौरान ईवेंट विधि के उपयोग को प्रदर्शित करता है। यह उदाहरण घटनाओं के उपयोग को प्राप्त करने , शुरू करने और रोकने का प्रदर्शन करता है ।
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</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>
#sortable-10, #sortable-11 { list-style-type: none;
margin: 0; padding: 0; width: 80%; }
#sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px;
padding: 0.4em; padding-left: 1.5em;
font-size: 17px; height: 16px; }
.highlight {
border: 1px solid #000000;
font-weight: bold;
font-size: 45px;
background-color: #cedc98;
}
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.wrap {
display: table-row-group;
}
.wrap1 {
float:left;
width: 100px;
}
</style>
<script>
$(function() {
$( "#sortable-10" ).sortable({
start: function (event, ui) {
$("span#result").html ($("span#result").html ()
+ "<b>start</b><br>");
},
receive : function (event, ui) {
$("span#result").html ($("span#result").html ()
+ ", receive");
},
stop: function (event, ui) {
$("span#result").html ($("span#result").html ()
+ "<b>stop</b><br>");
}
});
$( "#sortable-11" ).sortable({
connectWith : "#sortable-10, #sortable-11"
});
});
</script>
</head>
<body>
<div class = "wrap">
<div class = "wrap1">
<h3>List 1</h3>
<ul id = "sortable-10">
<li class = "default">A</li>
<li class = "default">B</li>
<li class = "default">C</li>
<li class = "default">D</li>
</ul>
</div>
<div class = "wrap1">
<h3>List 2</h3>
<ul id = "sortable-11">
<li class = "default">a</li>
<li class = "default">b</li>
<li class = "default">c</li>
<li class = "default">d</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं sortexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट देखना चाहिए। अब, आप परिणाम के साथ खेल सकते हैं -
आइटमों को सूची 1 में क्रमबद्ध करने का प्रयास करें, आप संदेश को इवेंट के प्रारंभ और स्टॉप पर प्रदर्शित होते देखेंगे । अब आइटम को सूची 2 से सूची 1 तक छोड़ें, फिर से एक संदेश प्राप्त घटना पर प्रदर्शित होता है ।