web-dev-qa-db-fra.com

Ajout d'une fonction à "événement" de retour glissé jQuery

Ce que j'ai:

J'ai un div déplaçable avec un paramètre de retour défini comme "invalide".

Ce dont j'ai besoin:

Lorsque le retour se produit, je souhaite déclencher une modification CSS sur un autre élément.

Le problème:

"revert" est un paramètre plutôt qu'un événement donc j'ai de grandes difficultés à déclencher le changement CSS requis lorsque le retour se produit.

Mon code:

$('#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)');
    }
});

Ce que j'ai essayé:

J'ai tenté sans succès d'utiliser "revenir" comme événement:

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

J'ai également essayé sans succès de faire en sorte que le paramètre de retour prenne cette fonction:

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;
     }
  }

Le contexte:

Je fais glisser un div qui, lorsqu'il est glissé, l'image d'arrière-plan change et lorsque le glissement revient, l'image d'arrière-plan est restaurée à son état d'origine.

Ma question:

Comment déclencher une modification CSS sur un autre élément lorsque le retour se produit lors d'un glissement?

jquery-uirevertjquery-draggable
22
Dominor Novus

Il s'avère que revert peut accepter une méthode. Voir ceci pour un exemple complet: http://jsfiddle.net/mori57/Xpscw/

Plus précisément:

$(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");
      }
    });
  });

J'espère que cela aide ... J'imagine que tout ce que vous essayiez de modifier était le problème, pas la tentative d'utiliser revert avec un appel de fonction. Regardez à nouveau le CSS que vous tentiez de définir et voyez si votre problème était peut-être là.

23
Jason M. Batchelor

Vous voulez faire quelque chose comme ceci:

 $('#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)');
        }
    });

DÉMO: http://jsfiddle.net/yTMwu/35/

J'espère que cela t'aides!

1
Dom