souris Trigger Faire glisser dans jQuery UI

Question

En utilisant jQuery 1.2.x et 1.5.x jQuery UI, on a pu déclencher manuellement glisser comme si:

jQuery("#myDiv").mousedown(function(ev) { 
target = jQuery(ev.target); 
if (target.hasClass("drag-me")) { 
    target.draggable({ 
     helper: "clone", 
     start: function() 
     { 
      console.log("drag start"); 
     }, 
     stop: function() 
     { 
      jQuery(this).draggable("destroy"); 
     } 
    }).trigger("mousedown.draggable", [ev]); 
} }); 

Il est appliqué au code HTML suivant:

<div id="myDiv"> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
</div> 

C'était une manière pratique d'appliquer le glissement aux éléments à l'intérieur d'un conteneur dont les enfants ont été modifiés dynamiquement. J'aime l'appeler "drag delegation". Toutefois, avec la version de jQuery 1.3.x & jQuery 1.6+, le script ci-dessus a cessé de fonctionner. Utilisation de jQuery 1.3.2 & jQuery UI 1.7.1 renvoie une erreur "trop ​​de récursivité". Comment puis-je déclencher manuellement le glissement? Aucune suggestion?

Answer 1

Il s'avère être beaucoup plus simple que prévu. En regardant la documentation de la méthode .trigger(), il n'est pas fait mention du fait que l'on peut aussi fournir l'événement original en tant qu'argument et pas seulement une représentation sous forme de chaîne du type d'événement.

Ainsi, on peut obtenir plus efficacement traînaient délégués comme ceci:

$("ul#dynamiclist").delegate("li", "mousedown", function(event) { 
    $(this).draggable({ 
      helper: "clone", 
      cursorAt: { left: 5, top: -5 }, 
      cursor: "move", 
      stop: function() { 
        $(this).draggable("destroy"); 
      } 
    }); }); 

La solution idéale aurait été pour la bibliothèque de l'interface utilisateur d'avoir une méthode pour effectuer ce type de délégation nativement pour les éléments dynamiques ....

Notez que ceci est applicable à jQuery UI jQuery 1.4.2 & 1.7.2

Answer 2

Si vous pouvez poster un exemple de code entier (avec html & balises de script pertinentes avec les versions chômés), je pourrais aider à indiquer sans doute ce qui est erroné et/ou vérifier le problème ....

Cependant, je Je ne suis pas sûr que vous voulez passer un tableau de 1 objet [ev] comme deuxième paramètre à votre appel de déclenchement.

Le message documentation indique "Enfin, vous pouvez transmettre un objet littéral avec des données.Il sera copié dans un objet réel jQuery.Event Notez que vous devez spécifier un attribut de type dans ce cas." Pouvez-vous vérifier qu'il (devrait être travaillé auparavant) comme vous l'avez écrit et/ou éventuellement coller plus de code ou d'URL sur la page concernée? Je serais heureux d'y jeter un autre coup d'oeil.

Espérons que ça aide. :)

Editer: Un autre regard. Il fait exactement ce que vous lui demandez. Sur l'événement mousedown, vous faites certaines choses, puis vous finissez par déclencher un autre événement mousedown qui fera certaines choses et causera un autre événement de souris et ainsi de suite ... et ainsi de suite ...

Vous avez créé un boucle infinie.

Pourquoi ne pas simplement faire en sorte que les composants div soient déplaçables lors du chargement de la page plutôt que lors du premier clic? Cela n'éviterait-il pas ce problème?

Jetez également un coup d'oeil à this post, et je serais très intéressé de voir du code qui avait l'habitude de fonctionner. Comme écrit, je ne suis pas sûr de comprendre la séquence de la façon dont le code émulerait un événement "drag" complet - composé d'événements mousedown, mousemove et mouse up. Faites le moi savoir. Merci!

Answer 3

I cas, vous n'êtes pas en utilisant jQuery 1.4 (et donc ne pas la méthode délégué()), il y a un autre Solution.

ce que vous devez faire pour arrêter le recurssion d'occuring est stopPropagate d'appel() sur les événements de mousedown pour tous les éléments:

$('drag-me').mousedown(function(ev){ 
    ev.stopPropagation(); 
}); 

aussi changer votre code comme celui-ci (avis l'appel stopPropagation() au bas):

jQuery("#myDiv").mousedown(function(ev) { 
target = jQuery(ev.target); 
if (target.hasClass("drag-me")) { 
     target.draggable({ 
       helper: "clone", 
       start: function() 
       { 
         console.log("drag start"); 
       }, 
       stop: function() 
       { 
         jQuery(this).draggable("destroy"); 
       } 
     }).trigger("mousedown.draggable", [ev]); 
     ev.stopPropagation() 
    } 
}); 

Cela devrait corriger votre récurrence sans fin. (au moins, cela a été le cas pour moi dans une situation similaire)

Answer 4

Les réponses ci-dessus semblent trop compliquées.

$('.nonDraggableObjectWhichTriggersDrag').mousedown(function(e) { 
    $('.draggableObject').trigger(e); 
}); 

Answer 5

les autres réponses ne fonctionnent pas pour moi, je n'utilisant jquery ui Simuler plugin

https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js

$("#myElement").simulate('drag');