jQuery Drag & Drop Live-Events

Question

Ich habe eine Anwendung mit einer langen Liste, die sich häufig ändern, und ich brauche die Elemente dieser Liste ziehbar zu sein.

Ich habe die jQuery UI ziehbar Plugin wurde verwenden, aber es ist langsam zu 400+ Liste Artikel hinzufügen, und hat jedes Mal neue Liste Elemente hinzugefügt erneut hinzugefügt werden.

Kennt jemand ein Plugin ähnlich dem jQuery UI ziehbar Plugin, das .live() Ereignisse jQuery 1.3 die verwendet? Dies würde beiden Probleme lösen.

Answer 1

Wojtek Lösung funktionierte perfekt für mich. Ich zog es ein bisschen etwas zu ändern, um es jQuery zu machen erweitern ...

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

Jetzt statt nannte es mögen:

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

... nur verwenden:

$(selector).liveDraggable({opts})

Answer 2

Dies ist ein Beispiel von Code, der perfekt für mich gearbeitet

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

Answer 3

Sie können Wrapper-Funktion wie folgt vor:

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

(ich benutze Prototyp mit jQuery - das ist, warum ich jQuery platziert () anstelle von $ ())

Und nun statt $ (Selektor) .draggable ({opts}) verwenden liveDraggable (Selektor, {entscheidet sich})

Answer 4

Stldoug des Code für mich gearbeitet, aber es gibt keine Notwendigkeit zu halten das Element .data Überprüfung ( „init“) auf jedem Ereignisse Mouseover. Außerdem ist es besser „mousemove-“, als „Mouseover“ zu verwenden, nicht immer ausgelöst werden, wenn Sie mit der Maus bereits über das Element ist, wenn die .live Funktion Kicks in.

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

Hier ist, wie Sie es verwenden:

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

Der Trick ist hinzuzufügen ": nicht (.ui-ziehbar)", um Ihre Wähler. Da jQuery die „ui-ziehbar“ Klasse Ihres Element automatisch hinzufügen, wenn es ziehbar wird, wird die .live Funktion nicht mehr ausrichten. Mit anderen Worten, löst es nur einmal, im Gegensatz zu der anderen Lösung, die immer und immer wieder löst, wie man Sachen bewegen.

Im Idealfall könnte man nur .unbind die „mousemove-“, aber das funktioniert nicht mit .live, leider.

Answer 5

Die Kombination der besten Antworten von @John und @jasimmk:

Mit .live:

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

.live ist allerdings veraltet, besser .on zu verwenden:

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

Wie @John erläuterte, wird .ui-draggable automatisch ziehbar Methoden hinzugefügt, so durch, dass die Klasse mit dem Wähler ohne Sie, dass ziehbar () gewährleisten, wird nur einmal für jedes Element aufgerufen werden. Und .on mit dem Umfang des Wählers verringern, Leistung zu verbessern.

Answer 6

Ein Beispiel:

Türkisch:

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

---

Englisch:

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

Hinweis: Sie können on() statt live() oder delegate verwenden. Die on() hat eine gute Leistung als andere

Answer 7

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

JSFiddle

Answer 8

Eine alte Frage. Aber threedubmedia hat Drag & Drop-Plugin mit Live (ab V 1.7 bekannt als einfach "on") zu unterstützen. http://threedubmedia.com/code/event/drop Haben sie nicht zu viel verwendet, so dass ich nicht für sie Leistung erklären kann, usw. sieht aber vernünftig.

Answer 9

Ein andere Möglichkeit ist es, die Mouseover-Handler mit einer abnehmbaren Klasse zu mischen, etwa so:

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

Es ist ziemlich einfach und löst einige der Probleme, die anderen Antworten haben mit Re-Bindung immer und immer wieder, wie Sie Mouseover.

Answer 10

Ein aktualisierte Version, die nicht leben nicht verwendet , wie es ist veraltet:

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