jQuery拖放使用直播活动

Question

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

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

有没有人知道一个类似于使用jQuery 1.3的 .live（）事件的jQuery UI draggable插件的插件？这将解决这两个问题。

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的代码对我有用，但是没有必要在每个mouseover事件上继续检查元素的.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。

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方法中，因此通过使用选择器排除该类，可以确保只在每个元素上调用一次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://threedubmedia.com/code/event/drop 没有使用它，所以我无法解释它的性能等，但看起来合理。

Answer 9

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

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

这是相当简单的，并解决了其他答案在鼠标悬停时反复重新绑定所带来的一些问题。

Answer 10

更新版本，不使用实时，因为它已被弃用：

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