使用实时事件进行 jQuery 拖放

Question

我有一个应用程序，其中有一个经常更改的长列表，并且我需要该列表中的项目可拖动。

我一直在使用 jQuery UI 可拖动插件，但添加到 400 多个列表项时速度很慢，并且每次添加新列表项时都必须重新添加。

有谁知道类似于 jQuery UI 可拖动插件的插件，它使用 jQuery 1.3 的 .live() 事件？这将解决这两个问题。

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

Answer 2

这是一个非常适合我的代码示例

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

Answer 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() 而不是 $() 的原因）

现在使用 liveDraggable(selector, {opts}) 而不是 $(selector).draggable({opts}) })

Answer 4

Stldoug 的代码对我有用，但无需在每个鼠标悬停事件上继续检查元素的 .data("init") 。另外，最好使用“mousemove”，因为当 .live 函数启动时，如果鼠标已经位于元素上方，则“mouseover”并不总是会被触发。

(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。

Answer 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 将缩小选择器的范围，从而提高性能。

Answer 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() 比其他方法具有更好的性能

Answer 7

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

JSFiddle

Answer 8

一个老问题。但 Threedubmedia 具有拖放插件，支持实时（从 v 1.7 开始，简称为“on”）支持。
http://tridubmedia.com/code/event/drop
没有太多使用它，所以我无法解释它的性能等，但看起来很合理。

Answer 9

另一种选择是将鼠标悬停处理程序与可移动类混合使用，如下所示：

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

它相当简单，并且解决了其他答案在鼠标悬停时一遍又一遍地重新绑定所带来的一些问题。

Answer 10

不使用 live 的更新版本，因为它已被弃用：

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