activar de forma dinámica/desactivar jQuery elemento sortable

Question

tengo filas de la tabla que se pueden ordenar en función de si ciertos botones de radio se comprueban o no. Los sortables se inicializan en document.ready de la siguiente manera:

$(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(); 
}); 

He la siguiente función adjunta a los botones de radio (IDS con el prefijo "active_") onchange que, o bien añade o elimina el atributo ui-state-disabled clase de filas de la tabla (IDS dinámicas prefijado "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! 
} 

Si selecciono un botón de radio que deben hacer una fila previamente no-ordenable ordenable, funciona y que puede arrastrar y soltar la fila. El problema es que si selecciono un botón de opción para hacer una fila que anteriormente era clasificable, no se puede ordenar, aún puedo arrastrarla y soltarla. El setter .sortable("option", "items", "tr:not..etc") no aparece como "cancelar el registro" de una fila si se pudo ordenar previamente. También probé .sortable ("refresh") sin suerte. Y he verificado para ver si el atributo de clase se está modificando con una alerta y así es.

Cualquier ayuda con esto sería muy apreciada.

Answer 1

Trate de usar la opción disabled. http://jqueryui.com/demos/sortable/#option-disabled

Answer 2

tuve un problema similar y se encontró una solución fácil (pero en mi ejemplo estoy usando no es un ul puede ordenar una mesa, ya que hay más libertad con recargo para las ul 's).

La idea detrás de esto es dejar la lista y todos sus elementos clasificables, pero quitar el mango, desactivando así la capacidad del elemento individual para ordenar, como se ve en el código

<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

me encontré con el mismo problema, que la opción items no parece eliminar los elementos que se habían habilitado anteriormente.

La opción cancel, sin embargo, lo hace. Tenga en cuenta que los elementos deshabilitados se desplazará alrededor para hacer sitio a los que se pueden ordenar (el lugar está todavía disponible como un destino de colocación), pero arrastrando los elementos propios discapacitados no funcionará. Utilizar una clase disabled también hace que sea fácil cambiar el estilo en función de si o no el artículo es clasificable (ver en jsfiddle).

El código aquí se basa parcialmente en Bah Bah respuesta del Cordero, pero ha sido en gran medida arreglado y simplificado.

El html:

<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> 

El 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"); 
    } 
}); 

El CSS:

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

.disabled { 
    color:#ddd; 
} 

Answer 4

sé que esto es viejo, pero tenía un problema similar. Tenía mis artículos clasificables en agrupaciones. Quería que ciertos grupos se puedan ordenar en cualquier lugar y algunos solo se pueden clasificar en una subsección de grupos.

<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> 

Los artículos de noSort pueden ordenar en cualquier lugar. Los elementos del canSort solo pueden clasificarse en otros bloques canSort.

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

Después de configurar esta regla después de la init parecía hacer el truco.

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

estaba tratando de hacerlo de forma dinámica en el arranque/parada eventos, pero esto resolvieron el problema, no estoy seguro "por qué", por lo pocillo de ensayo.

Answer 5

He estado tratando de hacer lo mismo. Realmente quería la característica de elementos en lugar de deshabilitada. Como se señaló anteriormente, existe una debilidad en la implementación de jQueryUI por la cual el ordenable no actualiza la lista de elementos si los elementos coinciden con los selectores.

Para evitar esto, simplemente destruí y volví a instalar el ordenado. He adaptado Hannele's JSfiddle para demostrar (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)" 
     }); 
});