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

然后我尝试制作整个＆＃34; itemid＆＃34; div draggable，但是当它被拖动时我只希望项目图像显示在光标下，而不是整个div。如果我理解正确，那就是＆＃34; appendTo＆＃34;用于：

        $("#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 - 第一个选项是 “default” ，这意味着拖动元素就是元素本身，它在 DOM TREE <中具有自己的位置/ strong>和appendTo选项在这种情况下不起作用。该元素不附加任何东西，它与DOM TREE中的情况相同。

2 - 第二个选项是 “clone” ，这意味着拖动元素与您开始拖动的元素不同，它是从第一个元素复制的另一个元素。现在，因为我们不能有一个孤儿元素，谁是新复制元素的父元素？你应该在appendTo选项中回答这个问题。

3 - 第三个选项是从函数返回的 “元素” 。它类似于：

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

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

最后你应该知道，当你拖动元素时，appendTo正在完成他的工作，并且在删除帮助器之后将消失（除非你将它附加到元素上）并且appendTo将完成他的工作。

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

1 个答案: