jQuery Drag And Drop à l'aide d'événements en direct

Question

J'ai une application avec une longue liste qui change fréquemment et j'ai besoin que les éléments de cette liste soient déplaçables.

J'utilise le plug-in déplaçable de l'interface utilisateur jQuery, mais il est lent à ajouter à plus de 400 éléments de liste et doit être rajouté chaque fois que de nouveaux éléments de liste sont ajoutés.

Est-ce que quelqu'un connaît un plugin similaire au plug-in déplaçable de l'interface utilisateur jQuery UI qui utilise les événements .live() jQuery 1.3? Cela résoudrait les deux problèmes.

Answer 1

La solution de Wojtek a parfaitement fonctionné pour moi. J'ai fini par le changer un peu pour le faire s'étendre. JQuery ...

 (function ($) {
   $.fn.liveDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
      return this;
   };
}(jQuery));
 

Maintenant, au lieu de l'appeler comme ceci:

 $(selector).draggable({opts});
 

... juste utiliser:

 $(selector).liveDraggable({opts})
 

Answer 2

Ceci est un exemple de code qui a parfaitement fonctionné pour moi

 $('.gadgets-column').live('mouseover',function(){
    $(this).draggable();
});
 

Answer 3

Vous pourriez faire fonctionner wrapper comme ceci:

 function liveDraggable(selector, options){
  jQuery(selector).live("mouseover",function(){
    if (!jQuery(this).data("init")) {
      jQuery(this).data("init", true);
      jQuery(this).draggable(options);
    }
  });
}
 

(J'utilise un prototype avec jQuery - c'est pourquoi j'ai placé jQuery () au lieu de $ ())

Et maintenant, au lieu de $ (sélecteur) .draggable ({opts}), utilisez liveDraggable (sélecteur, {opts})

Answer 4

Stldoug du code a fonctionné pour moi, mais il n'y a pas besoin de garder le contrôle de l'élément .de données("init") sur chaque événement mouseover. Aussi, il est préférable d'utiliser des "mousemove", comme "mouseover" ne permet pas toujours de se déclencher si votre souris est déjà plus de l'élément lors de l' .en direct de la fonction coups de pied dans.

(function ($) {
    $.fn.liveDraggable = function (opts) {
        this.live("mousemove", function() {
            $(this).draggable(opts);
        });
    };
}(jQuery));

Voici comment l'utiliser:

$('.thing:not(.ui-draggable)').liveDraggable();

L'astuce consiste à ajouter ":not(.ui-déplaçable)" à votre sélection. Depuis jQuery va ajouter automatiquement le "ui-déplaçable" classe à votre élément lorsqu'il devient déplaçable, l' .en direct de la fonction ne sera plus la cible. En d'autres mots, il ne déclenche une fois, à la différence de l'autre solution qui déclenche encore et que vous vous déplacez trucs autour.

Idéalement, vous avez juste à .séparer la "mousemove", mais qui ne fonctionne pas avec .vivre, malheureusement.

Answer 5

Combinant les meilleures réponses de @john et @jasimmk:

À l'aide de .live:

$('li:not(.ui-draggable)').live('mouseover',function(){
    $(this).draggable(); // Only called once per li
});

.live est obsolète, mieux utiliser .on:

$('ul').on('mouseover', 'li:not(.ui-draggable)', function(){
    $(this).draggable();  // Only called once per li
});

Comme @john expliqué, .ui-draggable est automatiquement ajouté à déplaçable méthodes, par l'exclusion de la classe avec le sélecteur, vous vous assurez que draggable() est appelé une seule fois sur chaque élément. Et à l'aide de .on permettra de réduire la portée de la sélection, l'amélioration de la performance.