jquery ui - sortable - Agregar una función a jQuery arrastrable revertir "evento"

jquery draggable sortable

Question

Lo que tengo:

Tengo un div arrastrable con un conjunto de parámetros de reversión como "inválido".

Lo que necesito:

Cuando ocurre la reversión, deseo activar un cambio de CSS a otro elemento.

El problema:

"revertir" es un parámetro en lugar de un evento, por lo que tengo una gran dificultad para activar el cambio de CSS requerido cuando se produce la reversión.

Mi código:

$(''#peg_icon'').draggable({
    revert: ''invalid'',
    scroll: false,
    stack: "#peg_icon",
    drag: function(event, ui) {
        $(''#peg_icon'').css(''background-image'',''url(images/peg-icon-when-dragged.png)'');
    }
});

Lo que he intentado:

Intenté sin éxito utilizar "revertir" como un evento:

revert: function(event, ui) {
    $(''#peg_icon'').css(''background-image'',''url(images/peg-icon-default.png)'');
},

También he intentado sin éxito obtener el parámetro de revertir para tomar esta función:

function(socketObj)
  {
     //if false then no socket object drop occurred.
     if(socketObj === false)
     {
        //revert the peg by returning true
        $(''#peg_icon'').css(''background-image'',''url(images/peg-icon-default.png)'');
        return true;
     }
     else
     {
        //return false so that the peg does not revert
        return false;
     }
  }

Contexto:

Estoy arrastrando un div que cuando se arrastra, la imagen de fondo cambia y cuando el arrastre se revierte, la imagen de fondo se restaura a su estado original.

Mi pregunta:

¿Cómo disparo un cambio de CSS a otro elemento cuando se produce la reversión en un arrastre?

Answer 1

Quieres hacer algo como esto:

 $(''#peg_icon'').draggable({
        revert: function (socketObj) {
        if (socketObj === true) {
            // success
            return false;
        }
        else {
            // reverting
            return true;
        }
    },
        scroll: false,
        stack: "#peg_icon",
        drag: function(event, ui) {
            $(''#peg_icon'').css(''background-image'',''url(images/peg-icon-when-dragged.png)'');
        }
    });

DEMO: http://jsfiddle.net/yTMwu/35/

¡Espero que esto ayude!

Answer 2

Resulta que revertir puede aceptar un método. Vea esto para un ejemplo completo: http://jsfiddle.net/mori57/Xpscw/

Específicamente:

$(function() {
    $("#ducky").draggable({
        revert: function(is_valid_drop){
            console.log("is_valid_drop = " + is_valid_drop);
            // when you''re done, you need to remove the "dragging" class
            // and yes, I''m sure this can be refactored better, but I''m 
            // out of time for today! :)
            if(!is_valid_drop){
               console.log("revert triggered");
                $(".pond").addClass("green");
                $(this).removeClass("inmotion");
               return true;
            } else {
                $(".pond").removeClass("green");
                $(this).removeClass("inmotion");
            }
        },
        drag: function(){
            // as you drag, add your "dragging" class, like so:
            $(this).addClass("inmotion");
        }
    });
    $("#boat").droppable({
      drop: function( event, ui ) {
        $(this)
          .addClass("ui-state-highlight");
      }
    });
  });

Espero que esto ayude ... Supongo que lo que sea que intentaste modificar fue el problema, no el intento de usar revertir con una llamada a función. Eche un vistazo nuevamente a qué CSS estaba tratando de establecer, y vea si tal vez su problema estaba ahí.