मेरे पास एक ड्रैगगेबल है जो इसके माध्यम से जुड़ा हुआ है connectToSortable सेवा मेरे एकाधिक sortables। मैं उन वस्तुओं की संख्या को सीमित करना चाहता हूं जिन्हें आप प्रत्येक क्रमबद्ध में डाल सकते हैं। जब आप किसी अन्य क्रमबद्ध से खींचते हैं, तो मैं ऐसा कर सकता हूं, लेकिन जब आप ड्रैगगेबल से क्रमबद्ध करने के लिए खींचते हैं। एक साधारण उदाहरण (जैसा कि JSBin):
$( ".sortable" ).sortable({
connectWith: ".sortable"
});
$( ".sortable" ).bind( "sortreceive", function(event, ui) {
// This will not work because the sender is a draggable, which has no "cancel" method
if ( 4 < $( this ).sortable( "toArray" ).length ) {
$(ui.sender).sortable("cancel");
}
});
$( "#draggable li" ).draggable({
connectToSortable: ".sortable",
helper: "clone"
});
मैंने पहले कोशिश की $(ui.sender).sortable("cancel"); में sortreceive घटना, लेकिन प्रेषक एक है draggable, दूसरा नहीं sortable, इसमें कोई नहीं है cancel विधि और यह काम नहीं करता है (इसलिए इन तथा इन प्रश्न मेरी समस्या को हल नहीं करते हैं)। मैंने निम्नलिखित कोशिश की है तर्क जो ड्रैगगेबल और सॉर्ट करने योग्य को एक साथ चिपकाता है, लेकिन मुझे कूदने और "फ़ेक्ड" स्टॉप को रद्द करने के लिए कोई जगह नहीं दिखती है।
यह बहुत अच्छा होगा अगर कुछ प्रकार की दृश्य प्रतिक्रिया होती है, जैसे कि माउस कर्सर बदल रहा है no-drop, और / या क्रमबद्ध पर पृष्ठभूमि रंग परिवर्तन।
संदर्भ: यह उत्तर देने का प्रयास है साइडबार में विजेट की संख्या सीमित करें वर्डप्रेस स्टैक एक्सचेंज पर। वर्डप्रेस विजेट एडमिनिस्ट्रेशन पेज में सभी साइडबार के लिए अलग-अलग सॉर्ट करने योग्य कंटेनर से जुड़े ड्रैगगेबल के रूप में स्थापित सभी उपलब्ध विगेट्स के साथ एक कंटेनर है। मैं संशोधित नहीं करना चाहता हूं कोर कोड, बस इसे "पूर्ण" साइडबार पर किसी अन्य विजेट को छोड़ने के लिए आवश्यकतानुसार छोटे कोड के साथ विस्तारित करें।
उत्तर:
जवाब के लिए 2 № 1सॉर्ट करने योग्य में तत्वों की संख्या की जांच करने के लिए बस खंड को जोड़ें और उस नंबर पर पहुंचने पर ड्रैगगेबल ईवेंट को अनबाइंड करें।
संपादित करें: (अब एकाधिक सूची समर्थन शामिल है)
$(".draggable").draggable({revert:true,helper:"clone",connectToSortable: ".sortable"});
$(".sortable").sortable({
connectWith:".sortable",
receive: function(ui) {
if($(this).children().length >=6) {
$(this).children().addClass("filled");
$(this).addClass("dontDrop");
$(".sortable").sortable("option", "connectWith",$(".sortable").not(".dontDrop"));
$(".draggable").draggable("option", "connectToSortable",$(".sortable").not(".dontDrop"));
}else {
$(this).children().removeClass("filled");
}
add_delete();
}
});
function add_delete() {
$(".delete").remove();
$(".sortable>li").append("<span class="delete">--</span>");
$(".delete").unbind("click").click(function(){
if($(this).parent().siblings().length <=5) {//for atmost 6 children in sortable
$(this).parent().parent().children().removeClass("filled");
$(this).parent().parent().removeClass("dontDrop");
console.log($(".sortable").not(".dontDrop"));
$(".sortable").sortable("option", "connectWith",$(".sortable").not(".dontDrop"));
$(".draggable").draggable("option", "connectToSortable",$(".sortable").not(".dontDrop"));
}
$(this).parent().hide("slow").remove();
});
}
add_delete();
यहाँ बेवकूफ की जाँच करें JSFiddle
तो मैंने यहां क्या उपयोग किया है: कोई न सिर्फ चयनकर्ताओं को पास कर सकता है बल्कि कनेक्ट करने के लिए तत्वों को जोड़ सकता है / कनेक्ट करने योग्य विकल्प। जब भी "उल" में 6 तत्व होते हैं तो मैं इसे "डॉटड्रॉप" श्रेणी देता हूं और इसलिए इसे कनेक्शन से बाहर रखा जाता है। उम्मीद है कि यह आपके लिए इसे साफ़ कर देगा।
उस बक्षीस को इस तरह से आने दें: डी
जवाब के लिए 4 № 2
जब कोई शर्त पूरी हो जाती है तो आप कनेक्शन को निष्क्रिय कर सकते हैं:
$("#sortable").bind( "sortreceive", function(event, ui) {
if ($( "#sortable li" ).length > 3){
$( "#draggable li" ).draggable( "option", "connectToSortable", false );
}
});
यहाँ पहेली: http://jsfiddle.net/ZLCDr/1/