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

你可以做包装函数是这样的：

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的（）而不是$（））

而且现在不是$（选择）.draggable（{opts}）使用liveDraggable（selector，{opts}）

Answer 3

这是一个完美为我工作的代码示例

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

Answer 4

Stldoug的代码适用于我，但不需要在每个mouseover事件中都检查元素的.data（“init”）。此外，最好使用“鼠标移动”，作为“鼠标悬停”并不总是被触发，如果你的鼠标已经在元素上时

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

的.live功能踢这里是你如何使用它。

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

诀窍是向选择器中添加“：not（.ui-draggable）”。由于jQuery在可拖动时会自动将“ui-draggable”类添加到元素中，因此.live函数将不再以它为目标。换句话说，它只触发一次，而不像其他解决方案在你移动东西时反复触发。

理想情况下，您可以将.unbind“mousemove”，但不幸的是，.live不起作用。

Answer 5

一个古老的问题。但Threedubmedia已经通过实时拖放插件（从v 1.7开始，简称“on”）支持。 http://threedubmedia.com/code/event/drop 有没有使用它，所以我不能说明它的性能等，但看起来合理。

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

组合来自@约翰和@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 8

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

JSFiddle

Answer 9

另一种选择是一个可移动类混合的鼠标悬停处理程序，就像这样：

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

这是相当简单，解决了一些问题，其他的答案有重随着鼠标悬停一遍又一遍地重新绑定。

Answer 10

的更新版本，因为它已被弃用并不住用：（！jQuery的（这一点）。数据（ “初始化”））

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