jQuery UI Draggable的自定义助手

Question

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

这是我的可拖拽元素;

<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魔法操作（过滤元素、添加新元素、类等）

然而，我找不到这个东西，而且draggable的文档很烂，#jquery里也没有人愿意帮我。有什么建议吗？

先感谢您！

- Emphram Stavanger

---

您的要求是元素也需要拖动吗？我的第一次回答尝试提供与其他人相同的结果，即自定义拖动，但不允许放置。因此，我找到了一个解决方法来实现元素的拖放。您是否不需要实际移动原始元素？ - musefan

我不需要移动原始元素，我需要的是一种定制化的克隆。 - Emphram Stavanger

嘿，我想知道你如何重新定位自定义克隆？例如，我有一个元素，大小为500x200，我需要在拖动它时将其调整为175x50。因此，我使用带有函数的helper返回一个“类似于自定义克隆”的175x50，但是当我开始拖动时，我的克隆元素始终从完整元素的左上角开始，无论光标在哪里... 有什么解决办法吗？ - KeizerBridge

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供您参考。

- Didier Ghys

---

谢谢，这个解决方法很有效！然而，我想了解更多关于这种奇怪的工作方式。例如，将$(this).find('.name')保存到变量中，就像在jQuery的任何其他地方一样，以便调用其他函数，在这里似乎不起作用。为什么？ - Emphram Stavanger

我不确定理解你的意思。你是指帮助函数吗？你能够 fork 我的 fiddle 并修改 JavaScript 以进行说明吗？ - Didier Ghys

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

这里有一个示例

如果你不喜欢“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"));
    }
});

- musefan

Answer 3

一个可能的解决方案是

演示链接: http://jsfiddle.net/SWbse/

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

- Ehtesham