jQuery Trascina selezione usando gli eventi live

Question

Ho un'applicazione con un lungo elenco che cambia frequentemente e ho bisogno che gli elementi di tale elenco siano trascinabili.

Sto usando il plug-in trascinabile dell'interfaccia utente jQuery, ma è lento da aggiungere a oltre 400 voci di elenco e deve essere aggiunto di nuovo ogni volta che vengono aggiunti nuovi elementi di elenco.

Qualcuno conosce un plug-in simile al plug-in trascinabile dell'interfaccia utente jQuery che utilizza gli eventi .live () di jQuery 1.3? Ciò risolverebbe entrambi i problemi.

Answer 1

La soluzione di Wojtek ha funzionato perfettamente per me. Ho finito per cambiarlo un po 'per farlo estendere jQuery ...

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

Ora invece di chiamarlo come:

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

... basta usare:

$(selector).liveDraggable({opts})

Answer 2

Questo è un esempio di codice che ha funzionato perfettamente per me

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

Answer 3

Potresti far funzionare il wrapper in questo modo:

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

(Uso il prototipo con jQuery - ecco perché ho inserito jQuery () anziché $ ())

E ora invece di $ (selettore) .draggable ({opts}) usa liveDraggable (selettore, {opts})

Answer 4

Il codice di Stldoug ha funzionato per me, ma non è necessario continuare a controllare l'elemento .data (" init ") su ogni evento del mouseover. Inoltre, è meglio usare "mousemove", come "mouseover" non viene sempre attivato se il mouse si trova già sopra l'elemento quando viene attivata la funzione .live.

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

Ecco come lo usi:

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

Il trucco è aggiungere ": not (.ui-trascinabile) " al tuo selettore. Poiché jQuery aggiungerà automaticamente la "quotazione trascinabile" classe al tuo elemento quando diventa trascinabile, la funzione .live non lo indirizzerà più. In altre parole, si innesca solo una volta, a differenza dell'altra soluzione che si innesca ripetutamente mentre muovi roba in giro.

Idealmente, potresti semplicemente .unbindare " mousemove " ;, ma questo non funziona con .live, sfortunatamente.

Answer 5

Combinando le migliori risposte di @john e @jasimmk:

Uso di .live:

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

.live è deprecato, meglio usare .on :

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

Come spiegato da @john, .ui-draggable viene automaticamente aggiunto ai metodi trascinabili, quindi escludendo quella classe con il selettore, si assicura che draggable () verrà chiamato una sola volta su ogni elemento. E l'uso di .on ridurrà l'ambito del selettore, migliorando le prestazioni.

Answer 6

Un esempio:

turco:

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

---

Inglese:

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

Nota: puoi usare su () invece di live () o delegate . Il on () ha buone prestazioni rispetto ad altri

Answer 7

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

JSFiddle

Answer 8

Una vecchia domanda. Ma threedubmedia ha un plugin drag and drop con supporto live (a partire dalla v 1.7 noto semplicemente come "on"). http://threedubmedia.com/code/event/drop Non l'ho usato molto, quindi non posso renderlo conto delle sue prestazioni, ecc., Ma sembra ragionevole.

Answer 9

Un'altra opzione è quella di mescolare il gestore del mouseover con una classe rimovibile, in questo modo:

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

È abbastanza semplice e risolve alcuni dei problemi che altre risposte hanno con la rilegatura più volte al passaggio del mouse.

Answer 10

Una versione aggiornata che non utilizza live poiché è obsoleta:

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