Ajout d'une fonction jQuery déplaçable revenir “événement”

Ce que j'ai:

J'ai un déplaçable div avec un revert paramètre défini comme "non valide".

Ce dont j'ai besoin:

Lorsque les revenir se produit je veux déclencher une CSS changement à un autre élément.

Le problème:

"revenir" est le paramètre plutôt qu'un événement donc, je suis en grande difficulté dans le déclenchement de la nécessaire CSS changer lorsque les revenir 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 à l'aide de "revenir en arrière" comme un événement:

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

J'ai aussi unnsuccesfully essayé d'obtenir les revenir paramater profiter de 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;
     }
  }

Contexte:

Je suis glisser un div que lorsque vous faites glisser, le background-image change et quand le drag revient, en arrière-plan, l'image est restaurée à son état original.

Ma question:

Comment puis-je déclencher un CSS modifier un autre élément lors de revenir se produit sur un drag?

Je voulais juste dire, très bien pensé et communiquées à la question!
Accusé de réception apprécié.

InformationsquelleAutor Dominor Novus | 2013-01-28

20

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

Spécifiquement:
```
$(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");
      }
    });
  });
```
Espère que cela aide... je suppose que ce que vous étiez en train de la modifier a la question, non pas de la tentative d'utiliser de revenir avec un appel de fonction. Prendre un coup d'oeil à nouveau à quel CSS vous avez tenté de définir, et de voir si peut-être votre problème était là.
- Plus précisément, je voudrais, au lieu d'utiliser l' .css() la méthode, l'utilisation addClass() pour ajouter une classe à votre déplaçable... avoir l'icône modifier dans le CSS, pas dans le code Javascript, de sorte que lorsque vous revenez, tout ce que vous avez à faire est de les appeler .removeCSS('glisser-indicateur de classe) à partir de votre déplaçables, et l'image reviendra à sa valeur par défaut automatiquement.
- Merci pour la réponse, le code de travail et de exemple. note Mineure: je n'avais aucune idée que les classes pourraient être ajoutés à des id en CSS c'est à dire #some_id.some_class. C'est la première fois que j'ai vu ce genre de sélecteur. J'ai été plutôt à l'aide de !important à la force de la .inmotion classe pour remplacer la valeur par défaut #peg_icon id.
- Question: Quel est l'avantage de l'utilisation de addClass/removeClass au lieu de la méthode JavaScript? Est-ce un cas de l'utilisation d'un on/off de l'action au lieu de deux actions distinctes? Mon origine, à l'aide de la méthode JavaScript a été principalement basée sur la superstition que par défaut, et "en mouvement" images d'arrière-plan ne serait pas préchargés via CSS et qu'en quelque sorte la méthode JavaScript "forces" accélérer la commutation entre les images d'arrière-plan. Tout simplement, l'une ou l'autre méthode (i.e. CSS vs JavaScript) de précontrainte ou de charger des images de fond plus vite que les autres?
- L'avantage est la flexibilité, et la séparation de la présentation de la logique. À un certain point, vous pouvez réutiliser le code, ou de modifier les images utilisées. Le CSS est là que ce genre d'information appartient, et de le changer dans le CSS est beaucoup moins susceptibles d'introduire par inadvertance bugs d'avoir à faire des modifications directement dans votre JS. Je ne peux pas répondre à la précontrainte partie de la question... c'est quelque chose que j'aurais à la recherche, mais le fait de forcer via JS signifie aussi l'introduction de plus de requêtes HTTP (un pour chaque fois que vous changez d'images), qui serait aussi inefficace, par opposition à la mise en cache de css.
- Entendu, je vais rester avec l'ajout/suppression de classe approche que vous avez conseillé.
- Belle @mori57. Merci!
- note Mineure: is_valid_drop n'est jamais vrai, c'est plutôt le drop élément sur une baisse des succès.
InformationsquelleAutor 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/

Espérons que cette aide!

Merci pour le code et le Violon de démonstration. Pour une raison quelconque, ce code m'a empêché de tomber #peg_icon secondaires à une zone de dépôt (c'est à dire une goutte zone autre que la zone de largage d'être traîné hors de). J'apprécie que ma mise à disposition d'un cadre limité à la question ci-dessus, pourrait être la cause de ce problème. note: j'ai été un peu traumatisée par votre effrayant Cage avatar.
+1 pour effrayant Cage commentaire! LOL

InformationsquelleAutor Dom

Vous devez vous connecter pour publier un commentaire.