KendoUI क्रमबद्ध करने के लिए draggable कनेक्ट

Question

क्या कोई तरीका है कि मैं KendoUI draggable आइटम को KendoUI क्रमबद्ध सूची में जोड़ने के लिए यहां jQueryUI के साथ उदाहरण के रूप में जोड़ा जा सकता हूं: http://jqueryui.com/draggable/#sortable। मैं इसके साथ एक दिन के लिए अपना सिर मार रहा हूं और यह मध्यम मजाकिया बन रहा है। क्या मुझे jQueryUI पर स्विच करना चाहिए?

Answer 1

क्या आपने KendoUI Sortable widget चेक किया था। यह वास्तव में उपयोग करने के लिए बहुत आसान है।

तो यह आपके HTML सूची तत्व है: यह डिफ़ॉल्ट प्रारंभ आप घसीटा तत्व के साथ http://jsfiddle.net/OnaBai/gN3jV/

:

$("#sortable").kendoSortable({ 
}); 

यहाँ यह जाँच करें: तुम बस क्या करने की जरूरत

<ul id="sortable"> 
    <li>Option 1</li> 
    <li>Option 2</li> 
    <li>Option 3</li> 
    <li>Option 4</li> 
    <li>Option 5</li> 
    <li>Option 6</li> 
</ul> 

मूल एक (समान सीएसएस शैली) की तरह दिखें लेकिन आप hint हैंडलर को परिभाषित करके इसे बदल सकते हैं:

$("#sortable").kendoSortable({ 
    hint:function(element) { 
     return element.clone().addClass("ob-hint"); 
    } 
}); 

जहां मैं ड्रैग किए गए तत्व को सीएसएस क्लास ob-hint में जोड़ता हूं।

पिछले उदाहरण संशोधित देखें: http://jsfiddle.net/OnaBai/gN3jV/1/

और तुम भी एक हैंडलर उस तत्व या यहां तक ​​कि एक पाठ करने के लिए एक वर्ग कहते हैं परिभाषित करते हुए प्लेसहोल्डर (जहां ड्रॉप करने) शैली दे सकते हैं।

$("#sortable").kendoSortable({ 
    hint:function(element) { 
     return element.clone().addClass("ob-hint"); 
    }, 
    placeholder:function(element) { 
     return element.clone().addClass("ob-placeholder").text("drop it here"); 
    }, 
}); 

संशोधित यहाँ उदाहरण: http://jsfiddle.net/OnaBai/gN3jV/2/

Answer 2

केंडो यूआई नियंत्रण में ऐसा करने का कोई तरीका नहीं है। टेलीरिक कहते हैं कि उनके पास ऐसा करने की कोई योजना नहीं है और वे बहुत बहाने हैं कि वे ऐसा क्यों नहीं करेंगे।

हालांकि, कुछ जावास्क्रिप्ट का उपयोग करके, इसके चारों ओर एक रास्ता है। यदि आप दोनों सूचियों को क्रमबद्ध बनाते हैं, तो आप 'ड्रैगगेबल' आइटम फ़िल्टर कर सकते हैं, इसलिए वे पदों को नहीं बदलते हैं।

$("#draggable").kendoSortable({ 
    connectWith: "#sortable",  
    start: function() { 
    $("#draggable div").each(function() { 
     $(this).removeClass("sortable"); 
    }); 
    } 
}); 

इस बेला यह दिखाता है: http://jsfiddle.net/kgjertsen/r4xmLevq/

केवल दोष यह है जब तक आप sortable क्षेत्र पर छोड़ 'खींचने योग्य' आइटम गायब हो जाता है है।