दिलचस्प पोस्ट
विंडोज कमान इंटरप्रेटर (सीएमडी.एक्सई) स्क्रिप्ट को कैसे पार्स करता है? एक अलग प्रक्रिया में जावा अनुप्रयोग को निष्पादित करना पृष्ठ लोड के बीच चर को जारी रखें गिट के साथ एक शाखा बिंदु ढूँढना? एक फ़ाइल और stdout में आउटपुट को कैसे रीडायरेक्ट करें Android ACTION_IMAGE_CAPTURE आशय MaxHeight और MaxWidth बाधाओं के साथ छवि का आकार बदलें किसी ऑब्जेक्ट में एक JSON स्ट्रिंग को सुरक्षित रूप से बदलना Raw_input पर समय सीमा कैसे निर्धारित करें # 1071 – निर्दिष्ट कुंजी बहुत लंबी थी; अधिकतम कुंजी लंबाई 767 बाइट्स है एक्सएमएल को पाइथन शब्दकोश को सीरियल करना अनुपात का आकार बदलने के लिए / पहलू अनुपात कैसे रखे? सबसे कुशल टी-एसक्यूएल का रास्ता एक निश्चित लंबाई के लिए बाईं तरफ एक varchar पैड? सी + + और सी के संयोजन – कैसे # efdef __cplusplus काम करता है? एसिंक पद्धति को कॉल करना सिंक्रोनस रूप से

jQuery Sortable – एकाधिक सूची आइटम का चयन करें और खींचें

मेरे पास एक डिज़ाइन है जहां मेरे पास "उपलब्ध बक्से" की सूची है, उपयोगकर्ताओं को "उपलब्ध बॉक्स" सूची से उन्हें "मेरी बॉक्स" सूची में खींचकर बॉक्स लेते हैं I

उपयोगकर्ताओं को बार-बार (अधिकतम 20) में कई बक्से नहीं लेने की तुलना में अधिक बार, वे बॉक्स के साथ समाप्त हो जाने पर, उन्हें वापस "उपलब्ध बक्से" सूची में खींचकर वापस खींचते हैं।

jQuery के क्रमबद्ध मुझे उस समय में एक बॉक्स खींचने की अनुमति मिलती है जो किसी उपयोगकर्ता के परिप्रेक्ष्य से अवांछनीय है। मैं इस मुद्दे के सरल समाधान के साथ नहीं आया हूं।

मुझे पूरी तरह से एक अलग यूआई पद्धति के साथ आना पड़ सकता है, लेकिन पहले किसी के पास यह सुझाव है कि यह कैसे पूरा किया जा सकता है?

धन्यवाद!

वेब के समाधान से एकत्रित समाधान "jQuery Sortable – एकाधिक सूची आइटम का चयन करें और खींचें"

मेरे पास यह काम छंटनी के द्वारा नहीं है, लेकिन मैंने ड्रैग करने योग्य और ड्रॉपपॉलेबल का उपयोग किया था मुझे नहीं पता है कि क्या मुझे आपकी ज़रूरत की सभी कार्यक्षमताओं को शामिल किया गया है, लेकिन यह एक अच्छी शुरुआत ( डेमो यहां होना चाहिए):

एचटीएमएल

<div class="demo"> <p>Available Boxes (click to select multiple boxes)</p> <ul id="draggable"> <li>Box #1</li> <li>Box #2</li> <li>Box #3</li> <li>Box #4</li> </ul> <p>My Boxes</p> <ul id="droppable"> </ul> </div> 

लिपि

 $(document).ready(function(){ var selectedClass = 'ui-state-highlight', clickDelay = 600, // click time (milliseconds) lastClick, diffClick; // timestamps $("#draggable li") // Script to deferentiate a click from a mousedown for drag event .bind('mousedown mouseup', function(e){ if (e.type=="mousedown") { lastClick = e.timeStamp; // get mousedown time } else { diffClick = e.timeStamp - lastClick; if ( diffClick < clickDelay ) { // add selected class to group draggable objects $(this).toggleClass(selectedClass); } } }) .draggable({ revertDuration: 10, // grouped items animate separately, so leave this number low containment: '.demo', start: function(e, ui) { ui.helper.addClass(selectedClass); }, stop: function(e, ui) { // reset group positions $('.' + selectedClass).css({ top:0, left:0 }); }, drag: function(e, ui) { // set selected group position to main dragged object // this works because the position is relative to the starting position $('.' + selectedClass).css({ top : ui.position.top, left: ui.position.left }); } }); $("#droppable, #draggable") .sortable() .droppable({ drop: function(e, ui) { $('.' + selectedClass) .appendTo($(this)) .add(ui.draggable) // ui.draggable is appended by the script, so add it after .removeClass(selectedClass) .css({ top:0, left:0 }); } }); }); 

कार्य समाधान

tl; dr : एक काम का उत्तर देने के लिए इस बेला को देखें ।


मैं कई चुनिंदा वस्तुओं को एक सॉर्टिंग से जुड़ी छंटनी में खींचने के मुद्दे पर एक समाधान के लिए हर जगह देख रहा था, और ये जवाब सबसे अच्छे थे जो मुझे मिल सके।

तथापि…

स्वीकार्य जवाब छोटी है, और @ शनीमल का उत्तर करीब है , लेकिन पूरी तरह से पूर्ण नहीं है। मैंने शनीमल का कोड लिया और उस पर बनाया।

मेने ठीक कर दिया:

  • गायब होने वाली सूची आइटम बग @ रयान का उल्लेख किया गया ,
  • एचटीएमएल में सिंटैक्स त्रुटियों को साफ किया गया (बंद होने वाले टैग्स और नेस्टेड <li/> s)

मैंने कहा:

  • एकाधिक आइटम्स को चुनने के लिए उचित Ctrl + click (या सीएमडी + क्लिक अगर मैक पर) समर्थन करता है नीचे पकड़े गए Ctrl कुंजी के बिना क्लिक करने से उस आइटम का चयन किया जाएगा, और एक ही सूची में अन्य आइटम को अचयनित करना होगा। यह एक ही क्लिक व्यवहार है, जैसा कि jQuery के यूआई Selectable() विजेट है , अंतर यह है कि Selectable() मूसरेड्रैग पर एक मार्की है।

बेला

HTML:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> <ul> <li>Four</li> <li>Five</li> <li>Six</li> </ul> 

जावास्क्रिप्ट (jQuery और jQuery के यूआई के साथ):

 $("ul").on('click', 'li', function (e) { if (e.ctrlKey || e.metaKey) { $(this).toggleClass("selected"); } else { $(this).addClass("selected").siblings().removeClass('selected'); } }).sortable({ connectWith: "ul", delay: 150, //Needed to prevent accidental drag when trying to select revert: 0, helper: function (e, item) { var helper = $('<li/>'); if (!item.hasClass('selected')) { item.addClass('selected').siblings().removeClass('selected'); } var elements = item.parent().children('.selected').clone(); item.data('multidrag', elements).siblings('.selected').remove(); return helper.append(elements); }, stop: function (e, info) { info.item.after(info.item.data('multidrag')).remove(); } }); 

ध्यान दें:

चूंकि मैंने इसे पोस्ट किया है, मैंने कुछ समानताएं कार्यान्वित की हैं – बहु-चयन क्षमता के साथ एक क्रमबद्ध करने के लिए ड्रैग करने योग्य सूची आइटम जोड़ने। इसे लगभग बिल्कुल समान सेट किया गया है, क्योंकि jQuery के यूआई विजेट बहुत ही समान हैं। एक UI युक्ति यह सुनिश्चित करने के लिए है कि आपके पास ड्रैगबैबल्स या सेलेबल्स के लिए delay पैरामीटर सेट है, ताकि आप एक ड्रैग की शुरुआत किए बिना एकाधिक आइटम चुनने के लिए क्लिक कर सकते हैं। फिर आप एक सहायक का निर्माण कर सकते हैं जो सभी चयनित तत्वों को एक साथ रखा जाता है (एक नया तत्व बनायें, चयनित आइटम क्लोन करें, और उन्हें जोड़ दें), लेकिन सुनिश्चित करें कि मूल वस्तु को बरकरार छोड़ दें (अन्यथा यह कार्यक्षमता को शिकंजा – मैं नहीं कह सकता बिल्कुल क्यों, लेकिन इसमें बहुत अधिक निराशाजनक डोम अपवाद शामिल हैं)।

मैंने भी Shift + क्लिक कार्यक्षमता को जोड़ा है, ताकि यह मूल डेस्कटॉप अनुप्रयोगों की तरह कार्य करे। मुझे एक ब्लॉग शुरू करना पड़ सकता है ताकि मैं इस पर अधिक विस्तार से विस्तार कर सकूं 🙂

JSFiddle: http://jsfiddle.net/hQnWG/

 <style> ul {border:1px solid Black;width:200px;height:200px;display:inline-block;vertical-align:top} li {background-color:Azure;border-bottom:1px dotted Gray} li.selected {background-color:GoldenRod} </style> <h1>Click items to select them</h1> <ul> <li>One</li> <li>Two<li> <li>Three</li> </ul><ul> <li>Four</li> <li>Five<li> <li>Six</li> </ul> <script> $("li").click(function(){ $(this).toggleClass("selected"); }) $("ul").sortable({ connectWith: "ul", start:function(e,info){ // info.item.siblings(".selected").appendTo(info.item); info.item.siblings(".selected").not(".ui-sortable-placeholder").appendTo(info.item); }, stop:function(e,info){ info.item.after(info.item.find("li")) } }) </script> 

इसके लिए एक jQuery UI प्लगइन है: https://github.com/shvetsgroup/jquery.multisortable

जेएसएफिल्ड: http://jsfiddle.net/neochief/KWeMM/

 $('ul.sortable').multisortable(); 

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

स्टैकहोवरफ्लो पर कुछ समाधानों का विश्लेषण करने के बाद, मैंने निम्नलिखित में मेरा संक्षेप किया है:

हेल्पर का उपयोग न करें – प्रारंभ करने का उपयोग करें, क्योंकि इसका पहले से यूआई है Iitem, जो डिफ़ॉल्ट रूप से सहायक है।

  start: function(event, ui){ // only essential functionality below // get your own dragged items, which do not include ui.item; // the example shows my custom select which selects the elements // with ".selected" class var dragged = ui.item.siblings(arr["nested_item"]).children('.tRow.tSelected').parent(arr["nested_item"]); // clone the dragged items var dragged_cloned = dragged.clone(); // add special class for easier pick-up at update part dragged_cloned.each(function(){$(this).addClass('drag_clone');}); // record dragged items as data to the ui.item ui.item.data('dragged', dragged); // hide dragged from the main list dragged.hide(); // attached cloned items to the ui.item - which is also ui.helper dragged_cloned.appendTo(ui.item); }, 
  1. अद्यतन भाग पर:

     update: function(event, ui){ // only essential functionality below // attach dragged items after the ui.item and show them ui.item.after(ui.item.data("dragged").show()); // remove cloned items ui.item.children(".drag_clone").remove(); }, 

रोकें फ़ंक्शंस को अद्यतन कार्यक्षमता की कुछ प्रति आवश्यकता हो सकती है, लेकिन अपडेट से अलग होने की संभावना है, 'कारण अगर कोई परिवर्तन नहीं होता है – सर्वर पर कुछ भी जमा नहीं करता है

जोड़ने के लिए: ड्रैग किए गए आइटमों के क्रम को सुरक्षित रखें