jQuery Arrastrar Y Soltar Usando Eventos En Vivo

Esta es una muestra de código que funcionó perfectamente para mí

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

Puedes hacer que wrapper funcione así:

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

(Uso prototype con jQuery-es por eso que coloqué jQuery () en lugar de $())

Y ahora en lugar de selector (selector).arrastrable ({opts}) use liveDraggable (selector, {opts})

El código de Stldoug funcionó para mí, pero no hay necesidad de seguir comprobando el elemento .datos ("init") en cada evento de mouseover. Además, es mejor usar "mousemove", ya que" mouseover " no siempre se activa si el ratón ya está sobre el elemento cuando el .la función en vivo entra en acción.

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

Así es como lo usas:

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

El truco es añadir ": not(.ui-draggable) " a su selector. Dado que jQuery agregará automáticamente la clase "ui-draggable" a su elemento cuando se convierta en arrastrable, el .la función live ya no se dirigirá a ella. En otras palabras, solo se activa una vez, a diferencia de la otra solución que se activa una y otra vez a medida que mueves cosas.

Idealmente, podrías simplemente .desabrocha el "mousemove", pero eso no funciona .en vivo, por desgracia.

Combinando las mejores respuestas de @john y @jasimmk:

Usando .live:

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

.live sin embargo, está en desuso, es mejor usar .on:

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

Como explicó @john, .ui-draggable se agrega automáticamente a los métodos arrastrables, por lo que al excluir esa clase con el selector, se asegura de que draggable() solo se llamará una vez en cada elemento. Y usar .on reducirá el alcance del selector, mejorando el rendimiento.

Un ejemplo:

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

Español:

<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: Puedes usar on() en lugar de live() o delegate. El on() tiene un buen rendimiento que otros

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

JSFiddle

Una vieja pregunta. Pero threedubmedia tiene arrastrar y soltar plugin con live (a partir de v 1.7 conocido como simplemente "on") apoyo. http://threedubmedia.com/code/event/drop No lo he usado mucho, así que no puedo explicar su rendimiento, etc. pero parece razonable.

Otra opción es mezclar el controlador mouseover con una clase extraíble, como así:

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

Es bastante sencillo y resuelve algunos de los problemas que otras respuestas tienen con volver a vincular una y otra vez a medida que pasa el ratón.

Una versión actualizada que no usa live ya que está obsoleta:

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