javascript - example - jquery droppable aceptar

jquery ui textarea

Question

¿Alguien puede decirme cómo puedo escribir una función en condición de aceptación y luego cómo descubre qué aceptar y qué no aceptar? Por ejemplo, quiero aceptar div a y div b en condición de aceptación. ¿Cómo puedo escribir a través de una función?

Answer 1

Además de la respuesta de Alex, que es la mejor respuesta que encontré en esta pregunta, me gustaría agregar que si desea verificar los atributos coincidentes entre droppable y draggable , puede usar la palabra clave para acceder al dropable dentro de su función de accept . Aquí hay un pequeño ejemplo que utilicé recientemente:

accept : function (draggable) {
  var id_group_drop, id_group_drag;

  //get the "id_group" stored in a data-attribute of the draggable
  id_group_drag = $(draggable).attr("data-id-group");

  //get the "id_group" stored in a data-attribute of the droppable
  id_group_drop = $(this).parent().attr("data-id-group");

  //compare the id_groups, return true if they match or false otherwise
  return id_group_drop == id_group_drag;
}

Por lo tanto, solo se acepta el elemento que se puede draggable , cuando id_group (recuerde, solo un ejemplo) coincide con id_group del id_group , de lo contrario, el elemento draggable se revertiría. Creo que este podría ser un caso de uso muy común, tal vez esto ayude a alguien.

Answer 2

En lugar de usar una clase como aceptación, puede usar una función como y devolver verdadero si coincide con sus criterios

$(''#mydroppable'').droppable(
{
    accept: function() { return true; },
    drop: function () { alert("Dropped!"); }
});

Answer 3

Esta es la solución que utilizo:

... accept: ''#diva,#divb'', ...

Answer 4

Esta es mi solución:

var foo = true;

$( ".draggable" ).draggable({ 
                        revert: function(){if(foo == true){return true;}else{foo = true;}},
                         });

    $("#droppable").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            if($this == $that){
                foo = true;
                alert("this will revert the draggable back to original position");
            }else{
                foo = false;
                alert("this will NOT revert the draggable back to original position");
            }
        }
    });

Answer 5

He descubierto una solución que funciona en base a la condición de que no se debe colocar ningún elemento que se pueda arrastrar en un dropable que ya esté ocupado por otro que se pueda arrastrar:

$(".placement").droppable({
    accept: function(elm) {
        // only allow draggables to the placement if there''s no other draggable 
        // in the droppable
        if (!$(this).attr(''isbusy''))
            return true;
    },
    drop: function(event, ui) {
        $(this).attr(''isbusy'', ''yeap''); // fill key with something

        var draggable = $(ui.draggable[0]);
        // free the draggable''s previous droppable 
        if (draggable.attr(''droppable'')) {
            $(''#'' + draggable.attr(''droppable'')).attr(''isbusy'', '''');
        }

        // save the new draggable''s droppable
        draggable.attr(''droppable'', $(this).attr(''id''));
    },
});

Answer 6

Según la documentación de Jquery sobre selectores .

Todos los draggables que coincidan con el selector serán aceptados. Si se especifica una función, se llamará a la función para cada elemento que se pueda arrastrar en la página (se pasa como el primer argumento de la función), para proporcionar un filtro personalizado. La función debe devolver verdadero si se debe aceptar el elemento arrastrable.

Así,

$(''.selector'').droppable({ accept: ''.special'' }); 

en su ejemplo, solo actuará como si se hubiera caído algo sobre él si tiene la clase "especial". Parece que puede aceptar cualquier selector Jquery .

Answer 7

Si desea que el droppable acepte una selección de elementos, puede hacer algo como esto:

$(".droppable").droppable({
    accept: function(d) { 
        if(d.hasClass("foo")||(d.attr("id")=="bar")){ 
            return true;
        }
    }
});

Este droppable aceptará elementos con la clase "foo" o un elemento con el id "barra"

Answer 8

Si entiendo su pregunta correctamente, desea aceptar condicionalmente el elemento eliminado en base a un código personalizado. La respuesta de Aberon es el caso típico: desea permitir que solo ciertas opciones arrastrables se eliminen según su clase, y todas las demás se revertirán. Si eso responde a tu pregunta, entonces bien.

Sin embargo, hay un caso para que la animación de reversión suceda condicionalmente en función de algo más complejo que una coincidencia de clase. En mi propio proyecto, estoy usando arrastrar y soltar para agregar usuarios a un grupo. Si el usuario eliminado ya está en el grupo, quiero que el elemento de ayuda del usuario vuelva. De lo contrario, sigo adelante con una acción AJAX para insertarlos. Este no es un sustituto para la verificación de back-end, pero es una buena respuesta visual.

He buscado en otra parte una respuesta simple a esto. Nota para los mantenedores de JQuery: para mí, la forma más sencilla sería agregar alguna propiedad al objeto de evento en la función de soltar, como esto:

$(''.target'').droppable({
    accept: ''.valid''
    drop: function(event, ui) {
        if(isDropOK() == true) {
            // add child here
        } else {
            event.revert = true;
        }
    }
});

Lamentablemente eso no funciona. Sin embargo, esto es lo que "funciona": configure el elemento que se puede arrastrar para que siempre se revierta y, a continuación, oculte el ayudante si se cumple la condición. Puede obtener una referencia al ayudante buscando el único elemento en la página que tiene la clase ".ui-draggable-dragging". Aquí hay un ejemplo, reemplaza "isDropOK ()" con tu propia lógica:

$(''.valid'').draggable({
    revert: true,
    helper: ''clone'',
    opacity: 0.5
});

$(''.target'').droppable({
    accept: ''.valid''
    drop: function(event, ui) {
        if(isDropOK() == true) {
            $(''.ui-draggable-dragging'').hide();
            // add child here
        }
    }
});

Entonces, para recapitular, todos los elementos siempre se revertirán a menos que intervenga en el evento drop y oculte manualmente el ayudante. La animación de reversión seguirá ocurriendo, pero los usuarios no la verán. Es un pequeño truco, pero el resultado final parece funcionar bien.