Cancelar arrastrando de un elemento puede ordenar

Question

Un caso puede ordenar absolutamente común:

<script> 
$(function() { 
    $("#sortable").sortable(); 
}); 
</script> 

<ul id="sortable"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

problema. necesidad de cancelar el arrastre de un elemento en una cierta condición y hay un buen consejo de Andrew Whitaker, pero que el enfoque está trabajando sólo para jquery-ui-arrastrable y falla por sortables:

$("#sortable").sortable({ 
    start: function() { 
    return false; // will still cause `this.helper is null` 
    } 
}); 

Will be greateful para sugerencias.

Answer 1

La función de devolución de llamada sort hace lo mismo para la especie como de arrastre para arrastrable (demo):

$("#sortable").sortable({ 
    sort: function() { 
     if ($(this).hasClass("cancel")) { 
      $(this).sortable("cancel"); 
     } 
    } 
}); 

Answer 2

Sortable tiene una capacidad de "cancelar" invoca mediante sortable('cancel').

De los documentos: "Cancela un cambio en la clasificación actual y la revierte al estado anterior a cuando se inició la clasificación actual". Ver http://api.jqueryui.com/sortable/#method-cancel.

uso

Ejemplo:

$("#sortable").sortable({ 
    stop: function(e, ui) { 
    if ("I need to cancel this") { 
     $(ui.sender).sortable('cancel'); 
    } 
    } 
}); 

Answer 3

Volviendo false como fudgey sugiere funciona muy bien para hacer las cosas de forma dinámica unsortable, pero también hay un cancel option en la configuración se puede ordenar lo que le permite administrar la unsortables estáticas así:

$("#sortable").sortable({ 
    // this prevents all buttons, form fields, and elemens 
    // with the "unsortable" class from being dragged 
    cancel: ":input, button, .unsortable" 
}); 

Answer 4

Trate this example

 
$('#list1').sortable({ 
    connectWith: 'ul' 
});  

$('#list2').sortable({ 
    connectWith: 'ul', 
    receive: function(ev, ui) { 
     if(ui.item.hasClass("number")) 
      ui.sender.sortable("cancel"); 
    } 
});