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 son ajout est lent à plus de 400 éléments de liste et doit être rajouté chaque fois que de nouveaux éléments sont ajoutés.

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

Answer 1

La solution de Wojtek a parfaitement fonctionné pour moi. Je me suis retrouvé à le changer un peu pour le faire s'étendre ...

(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 suit:

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

... utilisez simplement:

$(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 pouvez faire en sorte que le wrapper fonctionne 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

Le code de Stldoug a fonctionné pour moi, mais il n'est pas nécessaire de continuer à vérifier le .data ("init") de l'élément à chaque événement survolé. En outre, il est préférable d'utiliser "mousemove", comme "souris au dessus". ne se déclenche pas toujours si la souris survole déjà l'élément lorsque la fonction .live est activée.

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

Voici comment vous l'utilisez:

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

L'astuce consiste à ajouter ": not (.ui-draggable) " à votre sélecteur. Comme jQuery ajoutera automatiquement le " ui-draggable " classe à votre élément quand il devient déplaçable, la fonction .live ne le ciblera plus. En d’autres termes, elle ne se déclenche qu’une fois, contrairement à l’autre solution qui se déclenche sans cesse lorsque vous déplacez des éléments.

Idéalement, vous pouvez simplement dissocier le "mousemove", mais cela ne fonctionne pas avec .live, malheureusement.

Answer 5

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

Utilisation de .live :

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

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

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

Comme @john l'a expliqué, .ui-draggable est automatiquement ajouté aux méthodes déplaçables. Par conséquent, en excluant cette classe avec le sélecteur, vous vous assurez que draggable () ne sera appelé qu'une seule fois sur chaque élément. Et utiliser .on réduira la portée du sélecteur, améliorant ainsi les performances.

Answer 6

Un exemple:

Turc:

<div id="diyalogKutusu">
    <div id="diyalog-baslik">..baslik..</div>
    <div id="icerik">..icerik..</div>
</div>

$(document).on("mouseover", "#diyalogKutusu", function() {
    $(this).draggable({ handle: '#diyalog-baslik' });
});

Anglais:

<div id="dialogBox">
    <div id="dialogBox-title">..title..</div>
    <div id="content">..content..</div>
</div>

$(document).on("mouseover", "#dialogBox", function() {
    $(this).draggable({ handle: '#dialogBox-title' });
});

Remarque: vous pouvez utiliser on () au lieu de live () ou délégué . Le on () a de bonnes performances que d’autres

Answer 7

$("html divs to drag").appendTo("#layoutDiv").draggable(options);

JSFiddle

Answer 8

Une vieille question. Mais threedubmedia a un plug-in de glisser-déposer avec un support en direct (à partir de la version 1.7 appelé simplement "sur"). http://threedubmedia.com/code/event/drop Je ne l'ai pas trop utilisé, je ne peux donc pas en rendre compte les performances, etc., mais j'ai l'air raisonnable.

Answer 9

Une autre option consiste à mélanger le gestionnaire mouseover avec une classe amovible, comme suit:

$('.outer-container').on('mouseover', '.my-draggable.drag-unbound', function(e) {
  $(this).draggable().removeClass('drag-unbound');
});

C’est assez simple et résout certains des problèmes que d’autres réponses rencontrent lors de la reliure répétée au fur et à mesure que vous passez la souris.

Answer 10

Une version mise à jour qui n'utilise pas Live car elle est obsolète:

function liveDraggable(selector, options) {
    $(document).on('mouseover', selector, function () {
        if (!$(this).data("init")) {
            $(this).data("init", true);
            $(this).draggable(options);
        }
    });
}