tuve un caso de uso donde tenía que ejecutar alguna lógica en el método de la gota de lanzables para determinar si el arrastrable debería volver. I usó el siguiente para lograrlo:
$('.draggable-elements').draggable({
revert: function() {
if ($(this).hasClass('drag-revert')) {
$(this).removeClass('drag-revert');
return true;
}
}
});
$('.droppable-elements').droppable({
drop: function(event, ui) {
if (% conditional logic check here %) {
return $(ui.draggable).addClass('drag-revert');
}
}
});
Mi caso de uso es una tabla donde cada célula es una lanzables que representa un periodo de 5 minutos. Mis arrastrables son reservas que comienzan en una celda, pero se ejecutan en muchas celdas seguidas para representar el tiempo de reserva.
yo no quería ningún draggables que se superponen, ya que ello representaría una doble reserva. Entonces, después de la caída, encuentro todas las arrastrables en la fila, excluyendo la que acabo de mover, y verifico cualquier superposición.Si hay una superposición, mi lógica condicional devuelve verdadero y revertir el arrastrable.
La siguiente etapa es disparar una llamada ajax para actualizar la base de datos, si la lógica del lado del servidor dice que el movimiento no es válido, espero devolver un estado de error y revertir el arrastrable.
P.S. esta es mi primera respuesta, lo siento si he hecho algo mal. Consejos sobre cómo proporcionar buenas respuestas aceptados con gusto.
Editar: Después de probar mi llamada AJAX, me di cuenta de que hay una ventana de oportunidad para que la función droppable.drop lo haga antes de que se ejecute la función draggable.revert. Para cuando mi llamada AJAX devolvió false, la ventana ya había pasado y la clase se agregaba demasiado tarde para que se pueda arrastrar.revertir para reaccionar.
Como tal, ya no estoy confiando en la función draggable.revert, en vez actuando únicamente sobre la respuesta AJAX y si es falso, usando animado() para devolver el que pueden arrastrarse a su posición original, de la siguiente manera:
$('.draggable-elements').draggable();
$('.droppable-elements').droppable({
drop: function(event, ui) {
var postData = {
id: 1,
...
};
$.post('/ajax/url', postData, function(response) {
var response = $.parseJSON(response);
if (response.status != 1) {
return ui.draggable.animate({left: 0, top: 0}, 500);
}
}
}
});
Es posible que necesite tener draggable.start/arrastre sumar los valores superiores de la izquierda se puede arrastrar original y como atributos de los datos, pero para mí lo anterior trabajado bien.
+1 ¡gran ayuda! ¡Gracias! – Sisir