गतिशील रूप से सक्षम/अक्षम jquery sortable आइटम

Question

मेरे पास टेबल पंक्तियां हैं जो कि कुछ रेडियो बटन चेक किए गए हैं या नहीं, इस पर निर्भर करता है। sortables इस प्रकार document.ready पर प्रारंभ कर रहे हैं:

$(document).ready(function() { 
    // Return a helper with preserved width of cells 
    // handy code I got from http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/ 
    var fixHelper = function(e, ui) { 
     ui.children().each(function() { 
      $(this).width($(this).width()); 
     }); 
     return ui; 
    }; 
    // #opts = table id; tr.ui-state-disabled class = rows not sortable 
    $("#opts tbody").sortable({ 
     items: 'tr:not(.ui-state-disabled)', 
     cursor: 'crosshair', 
     helper: fixHelper 
    }).disableSelection(); 
}); 

मैं निम्नलिखित समारोह रेडियो बटन से जुड़ी है (आईडी पहले से जुड़ा हुआ "active_") onchange जो या तो कहते हैं या तालिका पंक्तियों से ui-state-disabled वर्ग विशेषता (गतिशील आईडी पहले से जुड़ा हुआ निकाल देता है "opt_"):

var toggleDrag = function(i){ 
    if ($('#active_'+i+'-0').is(':checked')) { 
     $('#opt_'+i).addClass('ui-state-disabled'); 
    } 
    if ($('#active_'+i+'-1').is(':checked')) { 
     $('#opt_'+i).removeClass(); 
    } 
    $("#opts tbody").sortable("option", "items", "tr:not(.ui-state-disabled)"); 
    //$("#opts tbody").sortable("refresh"); 
    //alert($('#opt_'+i).attr('class')); - alert indicates that the class attribute is being changed 
    //$("#opts tbody").sortable("option", "cursor", "auto"); - this works! 
} 

अगर मैं एक रेडियो बटन है कि एक पहले से अन-sortable पंक्ति sortable करना चाहिए का चयन करें, यह काम करता है और मैं खींचें और पंक्ति ड्रॉप कर सकते हैं। समस्या यह है कि अगर मैं एक पंक्ति बनाने के लिए एक रेडियो बटन का चयन करता हूं जो पहले सॉर्ट करने योग्य था, अन-क्रमबद्ध, मैं अभी भी इसे खींच और छोड़ सकता हूं। सेटर .sortable("option", "items", "tr:not..etc") एक पंक्ति को "अन-रजिस्टर" नहीं दिखाता है अगर यह पहले क्रमबद्ध था। मैंने भी भाग्यशाली ("ताज़ा करें") की कोशिश की। और मैंने यह देखने के लिए जांच की है कि वर्ग विशेषता को अलर्ट के साथ बदला जा रहा है या नहीं।

इसके साथ किसी भी मदद की सराहना की जाएगी।

Answer 1

disabled विकल्प का उपयोग करने का प्रयास करें। http://jqueryui.com/demos/sortable/#option-disabled

Answer 2

मुझे एक ही समस्या थी और एक आसान समाधान मिला (लेकिन मेरे उदाहरण में मैं एक क्रमबद्ध उल का उपयोग कर रहा हूं, क्योंकि उल में मार्क-अप के साथ अधिक स्वतंत्रता है)।

विचार के पीछे यह सूची और इसके सभी आइटमों sortable छोड़ने के लिए है, लेकिन हटाने संभाल, इस प्रकार अलग-अलग आइटम का सॉर्ट करने के लिए क्षमता को अक्षम करने के रूप में इस कोड

<ul id="sorted-list"> 
    <li> 
     <div class="handle sortable"> 
      <p>Item 1</p> 
      <input type="button" value="Disable Sort" /> 
     </div> 
    </li> 
    <li> 
     <div class="handle sortable"> 
      <p>Item 2</p> 
      <input type="button" value="Disable Sort" /> 
     </div> 
    </li> 
    <li> 
     <div class="handle sortable"> 
      <p>Item 3</p> 
      <input type="button" value="Disable Sort" /> 
     </div> 
    </li> 
    <li> 
     <div class="handle sortable"> 
      <p>Item 4</p> 
      <input type="button" value="Disable Sort" /> 
     </div> 
    </li> 
</ul> 
<script> 
    $("#sorted-list").sortable({ 
     items: "li", 
     handle: ".handle.sortable" 
    }); 
    $("#sorted-list").find("input").click(function() { 
     if ($(this).closest(".handle").hasClass("sortable")) 
      $(this).val("Enable Sort").closest(".handle").removeClass("sortable"); 
     else $(this).val("Disable Sort").closest(".handle").addClass("sortable"); 
    }); 
</script> 

Answer 3

मैं एक ही में भाग में देखा जाता है, समस्या यह है कि items विकल्प उन आइटम्स को निकालने के लिए प्रतीत नहीं होता है जो पहले सक्षम किए गए थे।

cancel विकल्प, हालांकि, करता है। ध्यान दें कि अक्षम आइटम क्रमबद्ध लोगों के लिए जगह बनाने के लिए चारों ओर स्थानांतरित हो जाएंगे (स्पॉट अभी भी एक ड्रॉप लक्ष्य के रूप में उपलब्ध है), लेकिन विकलांग वस्तुओं को खींचना स्वयं काम नहीं करेगा। disabled कक्षा का उपयोग करके आइटम को क्रमबद्ध करने के आधार पर स्टाइल को बदलना आसान हो जाता है (jsfiddle पर देखें)।

यहां कोड आंशिक रूप से लैम के उत्तर बह बह पर आधारित है, लेकिन यह बहुत ही सरल और सरल है।

एचटीएमएल:

<ul id="sorted-list"> 
    <li> 
     <p><input type="checkbox" checked="true" /> Item 1</p> 
    </li> 
    <li> 
     <p class="disabled"><input type="checkbox" /> Item 2</p> 
    </li> 
    <li> 
     <p><input type="checkbox" checked="true" /> Item 3</p> 
    </li> 
</ul> 

jQuery:

$("#sorted-list").sortable({ 
    cancel:".disabled" 
}); 

// add or remove the 'disabled' class based on the value of the checkbox 
$("#sorted-list input").click(function() { 
    if (this.checked) { 
     $(this.parentElement).removeClass("disabled"); 
    } else { 
     $(this.parentElement).addClass("disabled"); 
    } 
}); 

सीएसएस:

li { 
    border: 1px solid #aaa; 
    background-color: #eee; 
    color:#555; 
    padding: 5px; 
} 

.disabled { 
    color:#ddd; 
} 

Answer 4

मैं जानता हूँ कि यह पुराना है, लेकिन एक ऐसी ही समस्या थी। मेरे समूह में मेरी क्रमबद्ध वस्तुएं थीं। मैं चाहता था कि कुछ समूह कहीं भी क्रमबद्ध हों और कुछ केवल समूहों के उपधारा के लिए क्रमबद्ध हो।

<div id="sortBlock"> 
    <div id="noSort class="itemBlock"> 
     <div class="item"> 
     <div class="item"> 
    </div> 
    <div id="canSort" class="itemBlock"> 
     <div class="item"> 
     <div class="item"> 
    </div> 
</div> 

noSort से आइटम कहीं भी सॉर्ट कर सकते हैं। canSort से आइटम केवल अन्य canSort ब्लॉक में सॉर्ट कर सकते हैं।

$("#sortBlock").sortable({ 
    items: "> div.itemBlock > .item" // this makes sure only the sub items will be sortable 
}); 

फिर इस नियम को चालू करने के बाद चाल चल रही थी।

$("#sortBlock").sortable("option", "items", "> div:not(#noSort) > .item"); 

/शुरू में यह गतिशील करना घटनाओं को रोकने की कोशिश की गई थी, लेकिन इस चाल किया था, यकीन नहीं "क्यों", इतनी अच्छी तरह से परीक्षण करें।

Answer 5

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

इस के आसपास पाने के लिए, मैंने बस नष्ट कर दिया और क्रमबद्ध बहाल किया। मैंने हनीले के जेएसफिड को प्रदर्शित करने के लिए अनुकूलित किया है (http://jsfiddle.net/Sxg8D/140/)।

$("#sorted-list").sortable({ 
    items:"li:not(.disabled)" 
}); 

$("#sorted-list input").click(function() { 
    if (this.checked) { 
     $(this.parentElement).removeClass("disabled"); 
    } else { 
     $(this.parentElement).addClass("disabled"); 
    } 

    $("#sorted-list") 
     .sortable("destroy") 
     .sortable({ 
      items:"li:not(.disabled)" 
     }); 
});