jQuery UI Draggable的自定义帮助程序

Question

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

这是我的可拖动元素;

<ul>
  <li><div>Name</div> <span>12-12-2011</span></li>
  <li><div>Another name</div> <span>12-12-2011</span></li>
</ul>

和jQuery;

$("ul li").draggable(function(){
  helper: function(){
    return $("<div></div>");
  }
});

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

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

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

提前致谢!

Answer 1

首先你的通话方式draggable是错误的.预期参数是对象文字,而不是函数.

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

有以下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>

你可以这样做:

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

注意:<div>为了选择它,我在表示名称时添加了类,但您可以找到其他任何方法.

这是一个jsfiddle供您检查.

Answer 2

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

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

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

编辑:这似乎可以防止元素被丢弃,嗯......

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

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);
    }
});

这里的例子

如果你不喜欢"记住"变量的想法,似乎可以将自定义选项添加到可以保存原始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"));
    }
});