Evitar la caída del elemento de la lista en JqueryUI clasificable

jquery-ui drag-and-drop

Question

Tengo dos listas #sortable1 #sortable 2 y #sortable 2 que están conectadas como sortables, como se muestra en este example .

Puede arrastrar y soltar elementos de la lista de sortable1 a sortable 2 . Sin embargo, si un elemento en Sortable 1 contiene la clase "número", quiero evitar que caiga Sortable2 y, por lo tanto, hacer que el elemento arrastrado vuelva a ser clasificable 1 .

He usado lo siguiente en sortable2:

receive: function (event, ui) {
            if ($(ui.item).hasClass("number")) {
                $(ui.item).remove();
            }

pero elimina el elemento de la lista de ambas tablas por completo. Cualquier ayuda será apreciada.

Answer 1

Después de algunos experimentos, descubrí que, con mucho, el método más fácil es usar el evento remove, que esencialmente solo se activa cuando intentas colocar un elemento en un nuevo objeto de clasificación (que antes estaba disponible como objetivo utilizando connectWith).

Simplemente agregue esto a su llamada clasificable:

remove:function(e,ui) {
    if(ui.item.hasClass(''your_restricted_classname'')) return false;
},

Answer 2

Para cualquier persona que lea esto en el futuro, como lo menciona briansol en los comentarios de la respuesta aceptada, arroja un error.

Uncaught TypeError: Cannot read property ''removeChild'' of null

La documentación dice particularmente

cancel()

Cancela un cambio en el ordenamiento actual y lo vuelve al estado anterior al momento en que se inició el ordenamiento actual. Útil en las funciones de detener y recibir devolución de llamada.

La cancelación de la clasificación durante otros eventos no es confiable, por lo que es mejor usar el evento de receive como se muestra en la answer Mj Azani o usar el evento de stop siguiente manera:

$(''#list1'').sortable({
  connectWith: ''ul'',
  stop: function(ev, ui) {
    if(ui.item.hasClass("number"))
      $(this).sortable("cancel");
   }
}); 

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

Demo

Answer 3

Prueba este ejemplo

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

Answer 4

Puede utilizar una combinación de los beforeStop y beforeStop sortable(''cancel'') para validar el elemento que se está moviendo. En este ejemplo , al soltar un artículo, verifico si el artículo es válido mediante:

1. Comprobando si el artículo tiene el number clase.
2. y verificando si el elemento de la lista se ha caído en la lista

Esto es un poco más rígido de lo que me gustaría, así que, alternativamente, lo que podría hacer es verificar el elemento primario que se dejó caer para verificar si las listas son diferentes. Esto significa que potencialmente podría tener un elemento de number en list1 y list2 , pero no son intercambiables.

Ejemplo de jsFiddle

$(function() {
    $(''ul'').sortable({
        connectWith: ''ul'',
        beforeStop: function(ev, ui) {
            if ($(ui.item).hasClass(''number'') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable(''cancel'');
            }
        }
    });        
});​

Answer 5

Si a) solo tienes estas 2 listas, yb) no te importa que tu "número" realmente se arrastre y luego se caiga, simplemente puedes evitar que se arrastre con esto:

 sort: function(event, ui) {
if(ui.item.hasClass(''number'')) return false;
}

Answer 6

Si no necesita poder arrastrar los elementos con clase "número" en absoluto, también puede restringir toda la funcionalidad de arrastrar y soltar a los elementos que no tienen la clase "número":

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.number)"
});

Puede probarlo aquí: http://jsfiddle.net/60gwjsgb/1/

Answer 7

beforeStop: function(ev, ui) {
                if ($(ui.item).hasClass(''number'') && 
                    $(ui.placeholder).parent()[0] != this) {
                    $(this).sortable(''cancel'');
                }
            }

prueba esto.