使用实时事件的 jQuery 拖放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1805210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Drag And Drop Using Live Events
提问by devongovett
I have an application with a long list that changes frequently, and I need the items of that list to be draggable.
我有一个包含经常更改的长列表的应用程序，我需要该列表的项目是可拖动的。
I've been using the jQuery UI draggable plugin, but it is slow to add to 400+ list items, and has to be re-added every time new list items are added.
我一直在使用 jQuery UI 可拖动插件，但是添加到 400 多个列表项很慢，并且每次添加新列表项时都必须重新添加。
Does anyone know of a plugin similar to the jQuery UI draggable plugin that uses jQuery 1.3's .live()events? This would solve both problems.
有谁知道类似于使用 jQuery 1.3.live()事件的 jQuery UI 可拖动插件的插件？这将解决这两个问题。
回答by stldoug
Wojtek's solution worked perfectly for me. I wound up changing it a tad bit to make it extend jQuery...
Wojtek 的解决方案非常适合我。我最终稍微改变了它以使其扩展 jQuery ...
(function ($) {
$.fn.liveDraggable = function (opts) {
this.live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).draggable(opts);
}
});
return this;
};
}(jQuery));
Now instead of calling it like:
现在，而不是像这样称呼它：
$(selector).draggable({opts});
...just use:
...只需使用：
$(selector).liveDraggable({opts})
回答by Jasim Muhammed
This is a sample of code that perfectly worked for me
这是一个非常适合我的代码示例
$('.gadgets-column').live('mouseover',function(){
$(this).draggable();
});
回答by wojtekk
You could make wrapper function like this:
你可以像这样制作包装函数：
function liveDraggable(selector, options){
jQuery(selector).live("mouseover",function(){
if (!jQuery(this).data("init")) {
jQuery(this).data("init", true);
jQuery(this).draggable(options);
}
});
}
(I use prototype with jQuery - that's why i placed jQuery() instead of $())
（我将原型与 jQuery 一起使用 - 这就是我放置 jQuery() 而不是 $() 的原因）
And now instead of $(selector).draggable({opts}) use liveDraggable(selector, {opts})
现在代替 $(selector).draggable({opts}) 使用 liveDraggable(selector, {opts})
回答by john
Stldoug's code worked for me, but there's no need to keep checking the element's .data("init") on every mouseover event. Also, it's better to use "mousemove", as "mouseover" doesn't always get triggered if your mouse is already over the element when the .live function kicks in.
Stldoug 的代码对我有用，但没有必要在每个鼠标悬停事件上继续检查元素的 .data("init") 。此外，最好使用“mousemove”，因为当 .live 函数启动时，如果您的鼠标已经在元素上，“mouseover”并不总是被触发。
(function ($) {
$.fn.liveDraggable = function (opts) {
this.live("mousemove", function() {
$(this).draggable(opts);
});
};
}(jQuery));
Here's how you use it:
以下是您如何使用它：
$('.thing:not(.ui-draggable)').liveDraggable();
The trick is to add ":not(.ui-draggable)" to your selector. Since jQuery will automatically add the "ui-draggable" class to your element when it becomes draggable, the .live function will no longer target it. In other words, it only triggers once, unlike the other solution which triggers over and over as you move stuff around.
诀窍是将 ":not(.ui-draggable)" 添加到您的选择器中。由于 jQuery 会在元素变为可拖动时自动将“ui-draggable”类添加到您的元素中，因此 .live 函数将不再以它为目标。换句话说，它只触发一次，不像其他解决方案会在您四处移动东西时一遍又一遍地触发。
Ideally, you could just .unbind the "mousemove", but that doesn't work with .live, unfortunately.
理想情况下，您可以只取消绑定“mousemove”，但不幸的是，这不适用于 .live。
回答by Yarin
Combining the best answers from @john and @jasimmk:
结合@john 和@jasimmk 的最佳答案：
Using .live:
使用.live：
$('li:not(.ui-draggable)').live('mouseover',function(){
$(this).draggable(); // Only called once per li
});
.liveis deprecated though, better to use .on:
.live虽然已弃用，但最好使用.on：
$('ul').on('mouseover', 'li:not(.ui-draggable)', function(){
$(this).draggable(); // Only called once per li
});
As @john explained, .ui-draggableis automatically added to draggable methods, so by excluding that class with the selector, you ensure that draggable() will only be called once on each element. And using .onwill reduce the scope of the selector, improving performance.
正如@john 解释的那样，.ui-draggable会自动添加到可拖动方法中，因此通过使用选择器排除该类，您可以确保draggable() 只会在每个元素上调用一次。并且使用.on会缩小选择器的范围，提高性能。
回答by yokesh ganesan
回答by yokesh ganesan
An example:
一个例子：
Turkish:
土耳其：
<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' });
});
English:
英语：
<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' });
});
Note: You can use on()instead of live()or delegate. The on()has good performance than others
注意：您可以使用on()代替live()或delegate。该on()有比别人好的表现
回答by Micah
Another option is to mix the mouseover handler with a removable class, like so:
另一种选择是将鼠标悬停处理程序与可移动类混合，如下所示：
$('.outer-container').on('mouseover', '.my-draggable.drag-unbound', function(e) {
$(this).draggable().removeClass('drag-unbound');
});
It's fairly straightforward and resolves some of the issues that other answers have with re-binding over and over as you mouseover.
它相当简单，可以解决其他答案在鼠标悬停时一遍又一遍地重新绑定时遇到的一些问题。
回答by ErwanLent
An updated version that does not use liveas it is deprecated:
不推荐使用 live的更新版本：
function liveDraggable(selector, options) {
$(document).on('mouseover', selector, function () {
if (!$(this).data("init")) {
$(this).data("init", true);
$(this).draggable(options);
}
});
}
回答by Danny C
An old question. But threedubmedia has drag and drop plugin with live (as of v 1.7 known as simply "on") support. http://threedubmedia.com/code/event/dropHaven't used it to much so I can't account for it performance, etc. but looks reasonable.
一个老问题。但是 Threedubmedia 有拖放插件，支持实时（从 v 1.7 开始，简称为“on”）支持。 http://threedubmedia.com/code/event/drop没有使用太多，所以我无法解释它的性能等，但看起来很合理。
