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

因此，我目前正在尝试使我的第一个网站（所以原谅我的代码非常草率！），并有一些麻烦让拖动功能工作，我希望它。如何在JQuery UI中正确使用AppendTo和Draggable（）？

这是我创建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 
     });

但是每当我试图用这个拖东西，就说明不只是物品图像+边框，而且项目名称和物品成本，尽管黄金形象的规模比没有被拖动时通常更大。

我如何使它工作，所以它只显示图像，而不是被拖动时的整个事情？另外，为什么它显示整个div，如果我为appendTo选择的只是图像？

在此先感谢！

来源

2015-09-05 Chris C

这不是'appendTo'选项的目的，而是'helper'的目的，你可以使用一个函数，例如：'helper：function（）{return $（this）.find（'img'）;}' –

@ A.Wolff啊...那么附加什么呢？从我读过的内容来看，听起来就像是这样。 –

拖动时，它用于设置容器元素相对于拖动的元素。这是我的理解，但我不是一个jQuery UI用户，所以...现在关于你的预期行为，我想你想要：'helper：function（）{return $（this）.find（'img'） .clone（）;}'。我忘了在第一条评论发布的代码中使用克隆。如果你提供一个jsFiddle，我想有人可以快速修复它 –

的问题： “如何appendTo工作在可拖动（）”

我会尽量回答这个问题。简短回答是“可拖动助手在拖动时应附加到哪个元素。”如果你有问题了解这句话（就像我有）让我解释一下：

解释appendTo我必须先解释帮手，因为他们是彼此有关。当你开始使用的辅助拖动的元素，你有三种选择：

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

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

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

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

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

，这再次新的“P”不能成为孤儿元素，以便我们再次将其连接到在appendTo选项中选择的元素。

最后你应该知道appendTo只是在你拖动元素的时候完成他的工作，并且在删除助手之后会消失（除非你将它附加到一个元素上）并且appendTo将完成他的工作。

来源

2017-02-03 00:43:50 cool

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

回答

相关问题