jQuery UI Draggable的自定义帮助程序

我有一个jQuery UI可拖动，我试图创建一个自定义帮助器，其中包含原始元素的一些但不是所有信息。

这是我的可拖动元素;

 
Name
 12-12-2011
 
Another name
 12-12-2011
  

和jQuery;

 $("ul li").draggable(function(){ helper: function(){ return $("
"); } }); 

我们的想法是，在拖动时，用户将拥有一个仅包含名称但不包含时间元素的帮助程序。

我的实际代码比这更复杂，所以我真正想要的是任何选择器，它允许我选择原始元素或它的副本，然后在其上做各种jQuery魔术（过滤元素，添加新元素，类等）

然而，对于我的生活，我找不到这个，可拖得糟透的文件，＃jquery没有人会帮助我。 有任何想法吗？

提前致谢！

Answer 1

首先你调用draggable是错误的。 期望参数是对象文字，而不是函数。

this是helper函数中当前拖动的元素。

有以下HTML

 
 
Name
 12-12-2011
 
Another name
 12-12-2011
  

你可以这样做：

 $('ul li').draggable({ helper: function() { //debugger; return $("
").append($(this).find('.name').clone()); } }); 

注意：我已经为表示名称的

添加了类，以便选择它，但您可以找到其他任何方法。

这是一个jsfiddle供您检查。

Answer 2

好的，通过快速测试，以下内容将起作用….

 $("ul li").draggable({ helper: function() { return $("
hello
"); } }); 

请注意，您没有将函数作为可拖动参数传递。 另外，我在示例中添加了“hello”，因此帮助器DIV实际上包含了一些内容。

编辑 ：这似乎可以防止元素被丢弃，嗯……

一个固定 ：不漂亮，但这有效，也许它可以提出一些改进的想法……

 var remember; $("ul li").draggable({ helper: 'original', start: function(e, ui) { remember = $(this).html(); $(this).html("
hello
"); }, stop: function(e, ui) { $(this).html(remember); } }); 

这里的例子

如果你不喜欢“记住”变量的想法，似乎可以添加一个自定义选项到可以保存原始html的可拖动对象…

 $("ul li").draggable({ helper: 'original', start: function(e, ui) { $(this).draggable("option", "olddata", $(this).html()); $(this).html("
hello
"); }, stop: function(e, ui) { $(this).html($(this).draggable("option", "olddata")); } }); 

Answer 3

一种可能的解决方案是

小提琴： http ： //jsfiddle.net/SWbse/

  $(document).ready(function() { $("ul li").draggable({ helper: 'clone', start: function(event, ui){ ui.helper.children('span').remove(); } }); });