jQuery Drag & Drop utilizzando eventi dal vivo

Question

Ho un'applicazione con una lunga lista che cambia frequentemente, e ho bisogno che gli elementi di quella lista siano trascinabili.

Ho utilizzato il plugin trascinabile dell'interfaccia utente jQuery, ma è lento aggiungere a più di 400 voci di elenco e deve essere aggiunto nuovamente ogni volta che vengono aggiunti nuovi elementi di elenco.

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

Answer 1

La soluzione di Wojtek ha funzionato perfettamente per me. Finii per cambiare un po 'po' per renderlo 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 chiamare le cose come:

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

... basta usare:

$(selector).liveDraggable({opts}) 

Answer 2

Si potrebbe fare funzione 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); 
    } 
    }); 
} 

(io uso prototipo con jQuery - è per questo che ho messo jQuery() invece di $())

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

Answer 3

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

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

Answer 4

Il codice di Stldoug ha funzionato per me, ma non è necessario continuare a controllare l'elemento .data ("init") su ogni evento mouseover. Inoltre, è meglio usare "mouseMove", come "mouseover" non sempre ottenere innescato se il mouse è già finita l'elemento quando i calci di funzione .Live in

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

Ecco come lo si utilizza:.

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

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

Idealmente, si potrebbe semplicemente. Unbind il "mousemove", ma che non funziona con .live, purtroppo.

Answer 5

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

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: È possibile utilizzare al posto di on()live() o delegate. Il on() ha buone prestazioni di altri

Answer 7

Combinando le migliori risposte da @ John e @jasimmk:

Utilizzando .live:

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

.live è deprecato, però, 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 tale classe con il selettore, si garantisce che draggable() venga chiamato una sola volta su ciascun elemento. E l'utilizzo di .on ridurrà l'ambito del selettore, migliorando le prestazioni.

Answer 8

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

JSFiddle

Answer 9

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

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

E 'abbastanza semplice e risolve alcuni dei problemi che le altre risposte hanno con re -Collegando all'infinito come mouseover.

Answer 10

Una versione aggiornata che non utilizza dal vivo come è deprecato: (! JQuery (questo) .data ("init"))

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