¿Hay alguna manera en que pueda obtener jQuery para realizar una función cuando arrastra un elemento fuera de un DIV desplegable?jQuery Droppable: cayendo afuera div?
Digamos que tenemos elementos arrastrables o ordenables en un div y desea que se eliminen si se eliminan fuera de su div principal.
Sé que hay un evento de "salida" pero que funciona tan pronto como arrastra el elemento fuera del div, no cuando lo suelta (suelte el botón del mouse).
Finalmente obtuve una solución adecuada para esto, aunque también es un poco "hacky". Lo que hago es establecer el div en primer plano con los juegos arrastrables como elementos desplegables, pero uso las funciones de dropover y dropout para determinar si el elemento se encuentra fuera del div primer plano. Cuando está fuera del div, ato el evento mouseup para hacer la funcionalidad de soltar. Cuando está de regreso, desabrocho el evento mouseup para que no se dispare.
Porque al arrastrar ya estoy presionando el botón del mouse hacia abajo, soltarlo es lo mismo que soltar lo que tengo en mi "mano".
$("#foregroundDiv").droppable({
accept: ".draggableThingy",
tolerance: "pointer",
out: function(event, ui) {
$(ui.helper).mouseup(function() {
doSomethingTo(ui.draggable);
});
},
over: function(event, ui) {
$(ui.helper).unbind("mouseup");
}
});
¿Por qué no envuelve todos los elementos con otro div desprendible, y luego hace la comprobación allí?
¿Qué tal si el usuario lo dejó fuera de la ventana del navegador? ¿Considerarías esto también?
He tratado de envolverlo en otro droppable, pero parece que no funciona correctamente. El evento desplegable "de fondo" se activará aunque caiga dentro del div "en primer plano" donde estaba el elemento que se puede arrastrar. Ver http://stackoverflow.com/questions/1491742/jquery-ui-droppable-background Básicamente todavía estoy luchando con el mismo problema, acabo de volver a tratar de solucionarlo. – kasakka
si el ajuste no funciona para usted intente apilar, pero debe establecer el primer plano como un hermano con el fondo, luego simplemente configure el índice Z apropiado, o si no, COMPRUEBE el evento.objetivo en la devolución de llamada .. soltar: función (e) {if (e.targe.id == bg_id) {...} else {...}} – jerjer
Intenté eso, sin suerte. Parece que la función de soltar no reconoce ningún otro Id. De destino de evento que no sea el propio droppable. Al menos cuando trato de iniciar sesión en la consola el ID, solo los registros div que se pueden eliminar, todo lo demás no genera nada. De la misma manera, usar else para resolver esto no funciona, ya sea hacer algo cuando se coloca en el div desplegable o no hacer nada en absoluto. Desafortunadamente eso no funciona si el fondo div llena toda la ventana, ignora lo que está sobre el div – kasakka
Resolvió esto de una manera bastante "hacky": hizo una tabla con un div de contenido en el centro e hizo que todas las demás celdas de la tabla se puedan descargar. Esencialmente, esto significa que puede colocarse fuera del centro div sin problemas, pero aún está lejos de ser una buena forma de hacerlo.
Si alguien tiene una mejor manera, por favor dígame.
Tenía exactamente este problema, y esta fue la mejor solución que encontré. ¡Gracias! – froadie