Перетаскивание jQuery с использованием живых событий

Решение Wojtek отлично сработало для меня. Я немного изменил его, чтобы расширить jQuery...

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

Теперь вместо того, чтобы называть это так:

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

... просто используйте:

$(selector).liveDraggable({opts})

Это пример кода, который отлично работал у меня.

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

Вы можете сделать функцию оболочки следующим образом:

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

(Я использую прототип с jQuery, поэтому я поставил jQuery() вместо $())

И теперь вместо $(selector).draggable({opts}) используйте liveDraggable(selector, {opts})

Код Stldoug работал у меня, но нет необходимости постоянно проверять элемент .data("init") при каждом наведении курсора мыши. Кроме того, лучше использовать «mousemove», так как «mouseover» не всегда срабатывает, если ваша мышь уже находится над элементом, когда срабатывает функция .live.

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

Вот как вы его используете:

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

Хитрость заключается в том, чтобы добавить «:not(.ui-draggable)» к вашему селектору. Поскольку jQuery автоматически добавит класс «ui-draggable» к вашему элементу, когда он станет доступным для перетаскивания, функция .live больше не будет ориентироваться на него. Другими словами, он срабатывает только один раз, в отличие от другого решения, которое срабатывает снова и снова, когда вы перемещаете объекты.

В идеале вы могли бы просто .unbind "mousemove", но, к сожалению, это не работает с .live.

Объединяем лучшие ответы от @john и @jasimmk:

Используя .live:

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

.live устарел, лучше использовать .on:

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

Как объяснил @john, .ui-draggable автоматически добавляется к перетаскиваемым методам, поэтому, исключая этот класс с помощью селектора, вы гарантируете, что draggable() будет вызываться только один раз для каждого элемента. А использование .on уменьшит область действия селектора, повысив производительность.

Пример:

Турецкий:

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

Английский:

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

Примечание. Вы можете использовать on() вместо live() или delegate. on() имеет лучшую производительность, чем другие

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

JSFiddle

Старый вопрос. Но у threedubmedia есть плагин перетаскивания с живой (начиная с версии 1.7, просто "включенной") поддержкой. http://threedubmedia.com/code/event/drop Не так много использовал Я не могу объяснить его производительность и т. Д., Но выглядит разумно.

Другой вариант — смешать обработчик наведения мыши со съемным классом, например:

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

Это довольно просто и решает некоторые проблемы, которые возникают в других ответах, с повторной привязкой снова и снова при наведении курсора мыши.

обновленная версия, которая не использует live, так как она устарела:

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