如何在 JQuery ui 中正确使用 AppendTo 和 Draggable()？答案

【问题标题】：How to properly use AppendTo with Draggable() in JQuery ui?如何在 JQuery ui 中正确使用 AppendTo 和 Draggable()？
【发布时间】：2015-09-05 08:19:40
【问题描述】：

所以我目前正在尝试制作我的第一个网站（请原谅我的代码非常草率！）并且在让可拖动功能按我想要的方式工作时遇到了一些麻烦。

这是我创建 div 并将所有信息设置为我想要的方式的第一部分。基本上它是使用 api 从游戏中获取物品信息，然后为该物品制作显示。

<div class='item' id='item"+itemid+"' title='Item'>\n<div class='item_image'><img src='http://ddragon.leagueoflegends.com/cdn/5.2.1/img/item/"+item.image.full+"' style='z-index: 1;position: absolute;'><img src='images/item_border.png' style='z-index: 2;position: absolute;'></div>\n<div class='item_name'>"+item.name+"</div><br>\n<div class='item_cost'><img src='images/gold.png'> "+item.gold.total+"</div></div><br>\n

然后我尝试使整个“itemid” div 可拖动，但是当它被拖动时，我只希望项目图像显示在光标下，而不是整个 div。如果我理解正确，这就是“appendTo”的用途：

        $("#item"+itemid).draggable({
            containment: "window",
            appendTo: "#item"+itemid+" .item_image",
            helper: "clone",
            distance: 25,
            opacity: .8,
            scroll: false,
            stack: "div",
            revert: true
        });

但是，每当我尝试使用它拖动某些东西时，它不仅会显示物品图像+边框，还会显示物品名称和物品成本，尽管金色图像的比例比不拖动时的正常情况要大.

如何让它工作，以便在拖动时只显示图像，而不是整个东西？另外，如果我为 appendTo 选择的只是图像，为什么它会显示整个 div？

提前致谢！

【问题讨论】：

这不是appendTo 选项的目的，而是helper 一个你可以使用函数的地方，例如：helper: function(){ return $(this).find('img');}
@A.Wolff Ah... 那么 appendto 是什么？从我读过的内容来看，它听起来就是这样。
拖动时，用于设置容器元素相对于被拖动元素。这就是我的理解，但我不是 jQuery UI 用户，所以...现在关于您的预期行为，我猜您想要：helper: function(){ return $(this).find('img').clone();}。我忘了在第一条评论发布的代码中使用克隆。如果您提供 jsFiddle，我想有人可以快速修复它
@A.Wolff 好的。我想我现在明白了。我根据你所说的重写了我的内容并让它发挥作用。谢谢！

标签： javascript jquery html jquery-ui draggable

【解决方案1】：

问题：“appendTo 在 Draggable() 中如何工作？”

我会试着回答这个问题。简短的回答是“拖动时应将可拖动助手附加到哪个元素。”如果您在理解这句话时遇到问题（就像我一样），让我解释一下：

要解释 appendTo 我必须先解释 helper，因为它们是相互关联的。当您开始使用助手拖动元素时，您有三个选项：

1- helper: 'original'  //default
2- helper: 'clone'
3- helper: function(){ return "an element" }

1 - 第一个选项是"default"，这意味着拖动元素是元素本身，它在DOM TREE 和 appendTo 选项在这种情况下不起作用。该元素不附加到任何东西上，它与之前在 DOM 树中的情况相同。

2 - 第二个选项是 "clone"，这意味着拖动元素不是您开始拖动的同一个元素，它是从第一个元素复制的另一个元素.现在，既然我们不能有一个孤立元素，那么新复制元素的父元素是谁？那么你应该在 appendTo 选项中回答这个问题。

3 - 第三个选项是 “一个元素” 从函数返回。是这样的：

helper: function(){ return $("<p>YES</p>"); }

再一次，这个新的“p”不能是一个孤立元素，所以我们再次将它附加到一个在 appendTo 选项中选择的元素。

最后，您应该知道 appendTo 在您拖动元素时只是在做他的工作，而在放下帮助器之后（除非您将其附加到元素上），appendTo 将完成他的工作。

【讨论】：