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

Ответ 1

Решение 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})

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

Код Stldoug работал у меня, но нет необходимости продолжать проверять элемент .data( "init" ) на каждом событии mouseover. Кроме того, лучше использовать "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 больше не будет нацелена на него. Другими словами, он запускается только один раз, в отличие от другого решения, которое запускается снова и снова при перемещении.

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

Ответ 5

Объединяя лучшие ответы от @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 уменьшит объем селектора, повысив производительность.

Ответ 6

Пример:

Турецкий:

<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() имеет хорошую производительность, чем другие

Ответ 7

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

JSFiddle

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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

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