jQuery UI Draggable的自定义帮助程序 [英] Custom helper for jQuery UI Draggable

问题描述

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

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.

这是我的可拖动元素;

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>

和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.

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

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?

提前致谢！

推荐答案

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

First your way of calling draggable is faulty. The expected parameter is an object literal, not a function.

这个是<$中当前被拖动的元素c $ c> helper function。

this is the currently dragged element in the helper function.

拥有以下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> 代表名称是为了选择它，但你可以找到任何其他方法。

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.

这是一个 jsfiddle 供您检查。

这篇关于jQuery UI Draggable的自定义帮助程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！