Javascript jQuery UI Draggable 的自定义助手
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8501887/
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
Custom helper for jQuery UI Draggable
提问by Emphram Stavanger
I have a jQuery UI draggable, and I've tried to create a custom helper which would contain some but not all information of the original element.
我有一个可拖动的 jQuery UI，我尝试创建一个自定义助手，它包含原始元素的一些但不是全部信息。
Here's my draggable elements;
这是我的可拖动元素；
<ul>
<li><div>Name</div> <span>12-12-2011</span></li>
<li><div>Another name</div> <span>12-12-2011</span></li>
</ul>
And jQuery;
和 jQuery；
$("ul li").draggable(function(){
helper: function(){
return $("<div></div>");
}
});
The idea would be that while dragging, the user would have a helper that contains only the name, but not the time element.
这个想法是在拖动时，用户将拥有一个仅包含名称而不包含时间元素的助手。
My actual code is slightly more complex than this even, so what I'm really looking for is any selector that would allow me to select the original element, or a copy of it, and then do all kinds of jQuery magic on it (filtering elements, adding new elements, classes, etc.)
我的实际代码甚至比这稍微复杂一些，所以我真正要寻找的是任何允许我选择原始元素或它的副本的选择器，然后对其进行各种 jQuery 魔法（过滤元素，添加新元素、类等）
However, for my life I can't find this, the documentation of draggable sucks and nobody at #jquery would help me. Any ideas?
然而，在我的生活中我找不到这个，可拖动的文档很糟糕，#jquery 没有人会帮助我。有任何想法吗？
Thanks in advance!
提前致谢！
回答by Didier Ghys
First your way of calling draggableis faulty. The expected parameter is an object literal, not a function.
首先你的调用draggable方式有问题。预期参数是对象文字，而不是函数。
thisis the currently dragged element in the helperfunction.
this是helper函数中当前拖动的元素。
Having the following html
有以下html
<ul>
<li><div class="name">Name</div> <span>12-12-2011</span></li>
<li><div class="name">Another name</div> <span>12-12-2011</span></li>
</ul>
You can do this:
你可以这样做：
$('ul li').draggable({
helper: function() {
//debugger;
return $("<div></div>").append($(this).find('.name').clone());
}
});
Note: I have added class to the <div>representing the name for the sake of selecting it but you can find any other way to do so.
注意：<div>为了选择它，我在表示名称中添加了类，但您可以找到任何其他方法来这样做。
Here's a jsfiddlefor you to check.
这是一个jsfiddle供您检查。
回答by musefan
OK, with a quick test the following will work....
好的，通过快速测试，以下内容将起作用....
$("ul li").draggable({
helper: function() {
return $("<div>hello</div>");
} });
notice you do not pass a function as a draggable parameter. Also, I have added "hello" to the example so the helper DIV actually contains something.
请注意，您没有将函数作为可拖动参数传递。另外，我在示例中添加了“hello”，因此辅助 DIV 实际上包含一些内容。
EDIT: This seems to prevent the element being dropped, hmmm...
编辑：这似乎可以防止元素被删除，嗯...
A FIX: Not pretty, but this works, maybe it can give some ideas for improvement...
修复：不漂亮，但这有效，也许它可以提供一些改进的想法......
var remember;
$("ul li").draggable({
helper: 'original',
start: function(e, ui) {
remember = $(this).html();
$(this).html("<div>hello</div>");
},
stop: function(e, ui) {
$(this).html(remember);
}
});
If you don't like the idea of the "remember" variable it seems to be ok to add a custom option to the draggable object that can hold the original html...
如果您不喜欢“记住”变量的想法，似乎可以向可以保存原始 html 的可拖动对象添加自定义选项...
$("ul li").draggable({
helper: 'original',
start: function(e, ui) {
$(this).draggable("option", "olddata", $(this).html());
$(this).html("<div>hello</div>");
},
stop: function(e, ui) {
$(this).html($(this).draggable("option", "olddata"));
}
});
回答by Ehtesham
One possible solution is
一种可能的解决方案是
Fiddle: http://jsfiddle.net/SWbse/
小提琴：http: //jsfiddle.net/SWbse/
$(document).ready(function() {
$("ul li").draggable({
helper: 'clone',
start: function(event, ui){
ui.helper.children('span').remove();
}
});
});
