JQuery UI सॉर्ट करने योग्य - खाली रिक्त स्थान को अनुकरण करने के लिए सूची में प्लेसहोल्डर जोड़ें

JQuery UI सॉर्ट करने योग्य सूचियों के लिए सूचियों के लिए बहुत अच्छा काम करता है, लेकिन कहें कि मैं अंतराल के साथ आइटम्स की एक सूची प्रस्तुत करना चाहता हूं, उदा।JQuery UI सॉर्ट करने योग्य - खाली रिक्त स्थान को अनुकरण करने के लिए सूची में प्लेसहोल्डर जोड़ें

1, 2, खाली, 4, 5, 6, खाली, 8

जहां नंबर स्लॉट संख्या प्रतिनिधित्व करता है। तब अपेक्षित व्यवहार होगा यदि उपयोगकर्ता 2 स्लॉट पर एक तत्व ड्रैग करता है, तो 2 मान खाली स्लॉट 3 पर धकेल जाते हैं, और उपयोगकर्ता 2 स्लॉट में नया तत्व छोड़ सकता है, जबकि यदि वे एक नया तत्व खींचते हैं खाली 3 स्लॉट, सूची आइटम नीचे नहीं धकेलेंगे, और उपयोगकर्ता केवल नए आइटम को खाली 3 स्लॉट में छोड़ सकता है। उम्मीद है कि यह समझ में आता है।

मैं JQuery UI सॉर्ट करने योग्य कोड देख रहा हूं, और ऐसा लगता है कि मुझे परिवर्तन का उपयोग करने और इसे प्राप्त करने के लिए कॉलबैक प्राप्त करने की आवश्यकता है, लेकिन, सामान्य रूप से JQuery/JS में नया होना, यह स्पष्ट नहीं है मुझे इन खाली स्लॉट प्लेसहोल्डर्स को जोड़ने और चयन सूची प्रबंधित करने के लिए क्या उपयोग करना है ताकि मैं कस्टम कोड के साथ सॉर्टिंग कार्यक्षमता को तोड़ न सकूं।

किसी भी पॉइंटर्स, उदाहरण इत्यादि की बहुत सराहना की जाएगी।

थोड़ी देर के लिए इस पर मेरे सिर की पिटाई के बाद, मैं एक jsFiddle बनाया: http://jsfiddle.net/pdHnX/

मदद करने के लिए समस्या की व्याख्या। मुझे विश्वास है कि जो कुछ भी मैं पूरा करने की कोशिश कर रहा हूं वह एक ओवरराइड _rearrange विधि में हो सकता है। फिल्ड कोड उस मामले को संभालता है जहां कोई आइटम एक फिलर आइटम को प्रतिस्थापित कर रहा है, लेकिन एक अजीब समस्या है, जहां आप आइटम सूची से किसी आइटम को फिलर सूची में खींचते हैं, तो आइटम ड्रॉप करें, फिर उसी आइटम को फिलर सूची में खींचें , फिलर सूची 1 से कम हो जाती है, जो एक समस्या है।

एक बार जब आप फिलर सूची में अधिक आइटम खींचना शुरू करते हैं तो अधिक समस्याएं होती हैं, लेकिन यह वह जगह है जहां मैं इस समय समस्या के साथ हूं।

स्रोत

2012-08-31 Tom Hartwell

इस प्रश्न के समान ही है: http://stackoverflow.com/questions/7177166/jquery-ui-sortable-how-to-replace-existing-item-or-insert-new-draggable- निर्भर अगर यह समझाने में मदद करता है मैं –

को पूरा करने की कोशिश कर रहा हूं तो आप जो चाहते हैं वह कई प्लेसहोल्डर्स हैं जहां एक आइटम होता था जहां एक आइटम होता था? इसके अलावा क्या होगा जब सामान्य रूप से नई वस्तु के रूप में खींचने से सबकुछ नीचे चला जाएगा क्योंकि इसे स्थानांतरित किया जा रहा है? – Nal

क्षमा करें, यह विस्तार से एक बहुत मुश्किल सवाल था। आवश्यकताओं का वर्णन करने के लिए वास्तव में विशिष्ट और कठिन थे।

यहां वह समाधान है जिसे मैं ढूंढ रहा था।

अन्य लोग यहां जवाब देते हैं, जबकि वे खराब वर्णित समस्या का समाधान हो सकते हैं, जो मैं ढूंढ रहा था वह नहीं था।

http://jsfiddle.net/vfezJ/

दुर्भाग्य से, sortable.js कोड तो कोड जुड़ा हुआ वहाँ भी बहुत बालों बहुत बालों है। मैंने जो समाधान पोस्ट किया है, वह काम पाने के लिए सीएसएस कक्षाओं और डीओएम आईडी पर कुछ मान्यताओं को भी बनाता है।

स्रोत

2012-09-14 15:27:00

मुझे यकीन है कि अगर मैं आप सही तरीके से समझा नहीं गया हूँ, लेकिन यहाँ क्या मैं के साथ आया है:

http://jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone', 
    start: function(ev, ui){ ui.helper.width($(this).width()); }     // ensure helper width 
}); 

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight', 
    drop: function(ev, ui){ 
     var item = ui.draggable; 
     if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it 
     this.innerHTML = '';              // clean the placeholder 
     item.css({ top: 0, left: 0 }).appendTo(this);        // append item to placeholder 
    } 
});

अनुमान:

आप से आइटम खींचें शीर्ष सूची - यह "क्लोन" (मूल सूची में रहेगी)
यदि यो यू नीचे सूची से आइटम खींचें - यह (खाली प्लेसहोल्डर छोड़कर)
लिए कदम आप एक नीचे सूची के प्लेसहोल्डर पर किसी भी आइटम को छोड़ना तो होगा - आप नीचे सूची के गैर खाली प्लेसहोल्डर पर किसी भी आइटम ड्रॉप यदि यह प्लेसहोल्डर
का स्थान ले लेगा/मद - यह स्थान ले लेगा दोनों सूचियों की
आकार हमेशा रहना ही

मुझे पता है कि अगर यह मदद करता है या आप कुछ और की तलाश कर रहे हैं। इसके अलावा पूरे कार्य (इस खींचने के प्रयोजन क्या) समझा :-)

स्रोत

2012-09-06 10:05:07 tborychowski

क्षमा करें, मुझे लगता है कि मेरी व्याख्या सही ढंग से व्यवहार का वर्णन नहीं कर रही थी। –

मैं सहमत हूं, कॉलबैक का उपयोग आदर्श होगा। उम्मीद है कि नीचे एक बेहतर वर्णन है: यूआई दो सूचियों, 'वास्तविक' वस्तुओं की एक सूची है, दूसरी सूची 'प्लेसहोल्डर' आइटम के रूप में शुरू होती है। जब 'वास्तविक' आइटम 'प्लेसहोल्डर' आइटम सूची में खींचे जाते हैं, जब कोई वास्तविक आइटम 'प्लेसहोल्डर' आइटम पर हो जाता है, तो वह आइटम सॉर्ट करने योग्य लाइब्रेरी के प्लेसहोल्डर के लिए बदल जाता है (एक स्टाइल div जो दर्शाता है कि गिराए गए आइटम कहां जाएंगे सूची मैं)। –

यह आसान हिस्सा है। व्यवहार का कठिन हिस्सा सूची का आकार वही रहता है, इसलिए यदि उपयोगकर्ता उस क्षेत्र से दूसरे 'प्लेसहोल्डर' तक गिर जाता है, तो पिछले 'प्लेसहोल्डर' को पुनर्स्थापित किया जाना चाहिए ताकि सूची एक ही आकार में रह सके। यदि उपयोगकर्ता ने सूची में 'वास्तविक' आइटम गिरा दिया है और सूची में एक और 'वास्तविक' आइटम ड्रैग किया है, तो यह दूसरा 'वास्तविक' आइटम 'प्लेसहोल्डर' को प्रतिस्थापित करना चाहिए, लेकिन होवर पर 'वास्तविक' आइटम को स्थानांतरित करें, जैसा सॉर्ट करने योग्य है पुस्तकालय अब करता है। –

http://jsbin.com/igozat/2

यहाँ कुछ मैं मार पड़ी है मदद कर सकता है। यह अधिक क्रेडिट का सही या योग्य नहीं है क्योंकि क्रमबद्ध() मध्य-ड्रैग में बाधा नहीं डाली जा सकती है। यदि यह संभव था, तो एक ड्रॉप कार्रवाई पूरी तरह से खत्म हो सकती है।इसके अलावा, फिर से क्रमबद्ध करने का मेरा प्रयास छोटी थी। मुझे पता है कि यह विधियां केवल नियमित jQuery के साथ काम करती हैं, लेकिन यह jQuery UI के साथ काम नहीं कर रही है।

एक झटका की तरह लगने का जोखिम, अगर यह मैं था, तो मैं केवल jQuery के साथ कार्यक्षमता लिखूंगा। jQuery यूआई सभी इसके क्रैक होने के लिए नहीं है। : पी

स्रोत

2012-09-11 17:49:40

JQuery UI सॉर्ट करने योग्य - खाली रिक्त स्थान को अनुकरण करने के लिए सूची में प्लेसहोल्डर जोड़ें

उत्तर

संबंधित मुद्दे