如何在JQuery ui中正确使用AppendTo和Draggable（）？

Question

因此，我目前正在尝试建立我的第一个网站（因此请原谅我非常草率的代码！），并且在使可拖动功能按我希望的方式工作时遇到了一些麻烦。

这是我创建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？

提前致谢！

Answer 1

问题：“ appendTo在Draggable（）中如何工作？ ”

我会尽力回答。 简短的答案是“拖动时应将可拖动助手添加到哪个元素”。 如果您在理解这句话时（如我一样）有困难，请让我解释一下：

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

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

1-第一个选项是“默认” ，这意味着拖动元素是元素本身，并且它在DOM TREE中具有自己的位置，并且appendTo选项在这种情况下不起作用 。 元素没有追加任何内容，与DOM TREE中的情况相同。

2-第二个选项是“克隆” ，这意味着拖动元素与您开始拖动的元素不同，它是从第一个元素复制的另一个元素。 现在，由于我们没有孤立的元素，新复制的元素的父元素是谁？ 好了，您应该在appendTo选项中回答这个问题。

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

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

再一次，这个新的“ p”不能成为孤立元素，因此我们再次将其附加到在appendTo选项中选择的元素。

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