jquery-ui - examples - sortable jquery ejemplos

Cómo decidir si se acepta o rechaza un jQuery que se puede arrastrar en un droppable

Question

Estoy usando jQuery y tengo el siguiente problema:

En mi sitio tengo un tablero de ajedrez con piezas. Cada cuadrado es un div simple con la propiedad de fondo para mostrar blanco o negro. Sobre estos cuadrados (dentro de los divs) puse una etiqueta img que hace referencia a la pieza que debe estar sobre ese cuadrado. Algo como:

<div id="a8" class="square" style="background-image: url(''/images/background_white.png'')">
<img id="piece_a8" class="piece" src="/images/rook_black.png" />
</div>

Puedo controlar el movimiento de las piezas usando jQuery. Cada piece img de clase es arrastrable y cada división de clase square es desplegable. Ya tengo una función del lado del servidor que, dado un conjunto de coordenadas, devuelve "VÁLIDO" si el movimiento es válido y "NO VÁLIDO " si no es así. Mi idea es que, si el servidor devuelve "NO VÁLIDO", la pieza debe regresar a su casilla de origen, y si el servidor devuelve "VÁLIDO", la pieza debe permanecer en su nuevo cuadrado, eliminando todas las demás dentro del cuadrado objetivo.

Mi problema es que no sé cómo puedo aplicar este valor de retorno en mi código jQuery. He intentado poner funciones en la propiedad revert del arrastrable, y en las funciones de accept y drop del droppable, pero no he encontrado cómo hacer que $.get return sea falso o verdadero.

Cualquier ayuda sería realmente apreciada.

Gracias por adelantado,

Léster

Answer 1

No importa, respondió.

En caso de que alguien necesite saber, el truco está en 2 partes:

Primero: en la definición arrastrable, debajo del evento de inicio, agregue una función que guarda la posición original. Me gusta esto:

$(''item_to_drag'').draggable({
    start: function(){
        $(this).data("origPosition",$(this).position());
    }
});

Segundo: en la definición droppable, debajo del evento drop, haz tu .get y usa una función para procesar la respuesta; en caso de que sus condiciones no se cumplan, anime el arrastrable de nuevo a su posición original. Me gusta esto:

drop: function (event, ui) {
        $.get(url,function(data) {
            if (data == ''"INVALIDO"'')
            {
                ui.draggable.animate(ui.draggable.data("origPosition"),"slow");
            }
            else
            {
                //store new positions, whatever;
            }
        }
    );
}

Eso hará el truco.

Parte de la respuesta vino de aquí: en jQuery, ¿cómo revertir un error de llamada arrastrable en ajax? .