javascript - example - jQuery arrastrar y soltar-comprobar una gota fuera de un droppable

draggable js

Question

Mis disculpas si esto fue respondido en otra pregunta, ¡no pude encontrar una respuesta específica a mi problema!

Estoy tratando de probar si un jQuery arrastrable se está descartando fuera de un droppable legal. Esto normalmente se resolvería el 90% del tiempo invirtiendo el arrastre, pero no quiero hacerlo. En cambio, quiero hacer una cosa si el arrastrable se deja caer en un droppable (¡funciona muy bien!), Y algo más si se descarta fuera de todos los posibles droppables (¡que en este momento estoy obteniendo lo mejor de mí!).

En una palabra:

jQuery(''#droppable'').droppable(
{
    accept: ''#draggable'',
    drop: function(event, ui)
    {
        // awesome code that works and handles successful drops...
    }
});

jQuery(''#draggable'').draggable(
{
    revert: false,
    stop: function()
    {
        // need some way to check to see if this draggable has been dropped
        // successfully or not on an appropriate droppable...
        // I wish I could comment out my headache here like this too...
    }
});

Siento que me falta algo realmente obvio ... ¡gracias de antemano por cualquier ayuda!

Answer 1

Agregué la solución que adopté ya que puedes entender esto muy fácilmente desde las clases css del objeto que estás moviendo:

jQuery(''#draggable'').draggable({
  stop: function(event, ui) {
    if (ui.helper.hasClass(''ui-draggable-dragging'')) {
      console.log(''dropped out'');
    } else {
      console.log(''dropped successfully'');
    }
  }
});

Answer 2

Debido a que el evento de caída del drop-drop se dispara antes del evento de detención del draggable, creo que puede establecer un marcador en el elemento que se está arrastrando en el evento drop de esta manera:

jQuery(''#droppable'').droppable(
{
    accept: ''#draggable'',
    drop: function(event, ui)
    {
        ui.helper.data(''dropped'', true);
        // awesome code that works and handles successful drops...
    }
});

jQuery(''#draggable'').draggable(
{
    revert: false,
    start: function(event, ui) {
        ui.helper.data(''dropped'', false);
    },
    stop: function(event, ui)
    {
        alert(''stop: dropped='' + ui.helper.data(''dropped''));
        // Check value of ui.helper.data(''dropped'') and handle accordingly...
    }
});

Answer 3

Intenta usar el evento "out" de un elemento que se puede eliminar .

Esta es la documentation

"Este evento se desencadena cuando se arrastra un draggable aceptado (dentro de la tolerancia de) este droppable". Si estoy en lo correcto, esto es lo que necesitas.

Lo que también es posible es crear una superposición de elementos sobre toda la página. Si el elemento se cae allí, disparas tu evento. No es el mejor, pero creo que es la única forma de hacerlo. Porque necesita algún otro elemento "droppable" para disparar estos eventos.

Answer 4

Veo que ya tienes una respuesta; De todos modos, tuve el mismo problema hoy y lo resolví de esta manera:

var outside = 0;

// this one control if the draggable is outside the droppable area
$(''#droppable'').droppable({
    accept      : ''.draggable'',
    out         : function(){
        outside = 1;
    },
    over        : function(){
        outside = 0;
    }
});

// this one control if the draggable is dropped
$(''body'').droppable({
    accept      : ''.draggable'',
    drop        : function(event, ui){
        if(outside == 1){
            alert(''Dropped outside!'');
        }else{
            alert(''Dropped inside!'');
        }
    }
});

Lo necesitaba porque no podía cambiar las opciones de mis juegos de arrastre, así que tuve que trabajar solo con FullCalendar (lo necesitaba dentro del impresionante complemento de FullCalendar ). Supongo que podría tener algunos problemas con la opción "codiciosa" de los elementos desplegables, pero debería funcionar en la mayoría de los casos.

PD: lo siento por mi mal inglés.

EDITAR: Como se sugirió, creé la versión usando jQuery.data; se puede encontrar aquí: jsfiddle.net/Polmonite/WZma9/

De todos modos, la documentación de jQuery.data dice:

Tenga en cuenta que este método actualmente no proporciona soporte multiplataforma para establecer datos en documentos XML, ya que Internet Explorer no permite que los datos se adjunten a través de propiedades de expansión.

(lo que significa que no funciona en IE antes de 8)

EDIT 2: Como señaló @Darin Peterson, el código anterior no funciona con más de un área de colocación; esto debería solucionar ese problema: http://jsfiddle.net/Polmonite/XJCmM/

EDIT 3: Ejemplo de EDIT 2 tiene un error. Si arrastro "Arrastrarme" en la parte inferior desplegable, luego suelte "Arrástreme también" hacia la parte superior desplegable y luego suelte "Arrástreme también" afuera, alerta "¡Caído adentro!" Entonces, no lo uses.

EDIT 4: Como señaló @Aleksey Gor, el ejemplo en Edit 2 fue incorrecto; en realidad, fue más un ejemplo para explicar cómo recorrer todas las arrastrables / droppables, pero en realidad me olvidé de eliminar los mensajes de alerta, por lo que fue bastante confuso. Here el violín actualizado.

Answer 5

La ventaja del siguiente ejemplo es que no necesita cambiar ni conocer el código desplegable:

La propiedad de reversible que se puede arrastrar puede tener una función (valor) {}. Se pasa un valor como argumento, que indica si el ayudante se colocó en un elemento (el elemento desplegable), o ''falso'' si no se dejó caer en un elemento (se descarta o no se acepta).

Nota: necesita devolver el valor de bool correcto de esa función de revertir, para decirle al ayudante que revertir o no (verdadero / falso). Verdadero significa sí, lleve al ayudante a su posición original, moviéndolo hacia atrás en cámara lenta (listo para usar). Falso significa que no, simplemente retire al ayudante de forma abrupta. Establecer la propiedad revertir a ''no válido'' es un atajo para decir

• ''sí, si se deja caer afuera, luego revierte ayudante''
• ''no, si se deja caer en un elemento que se puede eliminar y se acepta, entonces mata al ayudante de inmediato''.

Supongo que puede agregar ui helper actual al contenedor arrastrable con propiedad de datos durante el evento de inicio. A continuación, retírelo en la función de revertir desde la propiedad de datos. A continuación, agregue una propiedad al asistente, indicando si se cayó o no. Luego, en última instancia, en el evento de detención, verifique el valor de esta propiedad de datos y haga lo que desea.

El orden del evento / función llama para arrastrar: start-revert-stop

Esto podría ser un ejemplo:

jQuery(''#draggable'').draggable(
{
    start: function(event, ui) {
        $(this).data(''uihelper'', ui.helper);
    },
    revert: function(value){
        var uiHelper = (this).data(''uihelper'');
        uiHelper.data(''dropped'', value !== false);
        if(value === false){
             return true;
        }
        return false;
    },
    stop: function(event, ui)
    {
        if(ui.helper.data(''dropped'') === true){
            // handle accordingly...
        }
    }
});

Incluso puede devolver true en la función de revertir, y simplemente eliminar el helper durante el evento de detención, dependiendo del valor de los datos (''descartado'') con ui.helper.remove (). O incluso podría explotar con CSS3 si todavía tiene un mal día;)