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",因为当.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.