jQuery przeciągnij i upuść za pomocą wydarzeń NA ŻYWO

To jest próbka kodu, który idealnie mi się sprawdził

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

Możesz zrobić funkcję wrappera w następujący sposób:

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

(używam prototype z jQuery - dlatego umieściłem jQuery () zamiast $())

I teraz zamiast $(selektor).draggable ({opts}) użyj liveDraggable (selector, {opts})

Kod Stldouga zadziałał dla mnie, ale nie ma potrzeby sprawdzania elementu .data("init") dla każdego zdarzenia mouseover. Ponadto, lepiej jest użyć "mousemove", jak "mouseover" nie zawsze zostanie uruchomiony, jeśli mysz jest już nad elementem, gdy .działa funkcja live.

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

Oto jak go używasz:

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

Sztuczka polega na dodaniu ": not(.ui-draggable) " do twojego selektora. Ponieważ jQuery automatycznie doda klasę "UI-draggable" do twojego elementu, gdy stanie się draggable, the .funkcja live nie będzie już jej celem. Innymi słowy, uruchamia się tylko raz, w przeciwieństwie do innego rozwiązania, które uruchamia się w kółko, gdy przenosisz rzeczy.

Połączenie najlepszych odpowiedzi od @ john i @ jasimmk:

Za pomocą .live:

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

.live jest jednak przestarzały, lepiej używać .on:

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

Jak wyjaśnił @ john, {[5] } jest automatycznie dodawana do metod draggable, więc wykluczając tę klasę za pomocą selektora, zapewniasz, że funkcja draggable() będzie wywoływana tylko raz na każdym elemencie. A użycie .on zmniejszy zakres selektora, poprawiając wydajność.

Przykład:

Turecki:

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

Angielski:

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

Uwaga: możesz użyć on() zamiast live() lub delegate. on() ma dobrą wydajność niż inne

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

JSFiddle

Stare pytanie. Ale threedubmedia ma wtyczkę przeciągnij i upuść z obsługą live (od wersji 1.7 znanej jako po prostu "włączony"). http://threedubmedia.com/code/event/drop Nie używałem go zbyt wiele, więc nie mogę się z tego rozliczać itp. ale wygląda rozsądnie.

Inną opcją jest połączenie funkcji obsługi mouseover z klasą wymienną, w ten sposób:

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

Jest to dość proste i rozwiązuje niektóre problemy, które Inne odpowiedzi mają z ponownym wiązaniem w kółko, gdy mysz.

A zaktualizowana wersja, która nie używa live , ponieważ jest przestarzała:

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