jQuery拖放使用现场活动
我有一个长列表的应用程序经常更改，我需要该列表的项目是可拖动的。
我一直在使用jQuery UI可拖动插件，但添加到400多个列表项目的速度很慢，每次添加新列表项时都必须重新添加。
有谁知道一个插件类似于jQuery UI可拖动插件，使用jQuery 1.3的.live()事件吗？ 这将解决这两个问题。
Wojtek的解决scheme对我来说非常合适。 我结束了改变它有点让它扩展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})
这是一个完美的代码示例
$('.gadgets-column').live('mouseover',function(){ $(this).draggable(); });
你可以像这样做包装function：
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（）而不是$（））
现在，而不是$（select器）.draggable（{opts}）使用liveDraggable（select器，{opts}）
Stldoug的代码为我工作，但没有必要继续检查每个鼠标hover事件的元素的.data（“init”）。 另外，最好使用“mousemove”，因为如果鼠标已经在.live函数启动的时候触发了，那么“mouseover”并不总是被触发。
(function ($) { $.fn.liveDraggable = function (opts) { this.live("mousemove", function() { $(this).draggable(opts); }); }; }(jQuery));
以下是你如何使用它：
$('.thing:not(.ui-draggable)').liveDraggable();
诀窍是添加“：不（（.ui-draggable）”）到您的select器。 由于jQuery会自动将“ui-draggable”类添加到元素中，因此.live函数将不再以此为目标。 换句话说，它只触发一次，而不像其他的解决scheme，当你移动的东西周围触发反复。
理想情况下，你可以只是.unbind“mousemove”，但不幸的是.Live不起作用。
结合@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会自动添加到可拖动的方法中，所以通过使用select器排除该类，可以确保每个元素只能调用一次draggable（）。 而使用.on会减lessselect器的范围，提高性能。
一个例子：
土耳其：
<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()性能比其他的好
$("html divs to drag").appendTo("#layoutDiv").draggable(options);
的jsfiddle
一个古老的问题。 但是，threedubmedia已经实时拖放插件（从v 1.7开始，简称“on”）支持。 http://threedubmedia.com/code/event/drop有没有使用它，所以我不能说明它的性能等，但看起来是合理的。;
另一种select是将鼠标hover处理程序与可移动类混合，如下所示：
$('.outer-container').on('mouseover', '.my-draggable.drag-unbound', function(e) { $(this).draggable().removeClass('drag-unbound'); });
这是相当简单的，并解决了一些问题，其他答案与你的鼠标hover一遍又一遍地重新绑定。
不推荐使用实时更新的版本 ：
function liveDraggable(selector, options) { $(document).on('mouseover', selector, function () { if (!$(this).data("init")) { $(this).data("init", true); $(this).draggable(options); } }); }
