无法拖动附加的项目答案

【问题标题】：Not able to drag appended items无法拖动附加的项目
【发布时间】：2023-03-16 12:26:02
【问题描述】：

我正在尝试使用 jquery ui 使附加的项目可拖动，使用 jquery 我想说当单击蔬菜时将其添加到泥土中。使蔬菜可在泥土中拖动，但被限制在该元素内。以下代码不起作用是有原因的吗？

<body>
  <ul id = "dirt">  
  </ul>    
  <ul id = "veggies">
    <li class ="veg tomato"></li>
    <li class ="veg cucumber"></li>
    <li class ="veg pepper"></li>
    <li class ="veg eggplant"></li>
    <li class ="veg beans"></li>
  </ul>
 <script>
  $(document).ready(function(){
  $("#veggies li").click(function(){
    $(this).clone().appendTo("#dirt");
    });
  $("#dirt li").draggable({
    containment: '#dirt'
  });
}); 
</body>

【问题讨论】：

Jquery-ui draggable and dynamic Jquery-ui draggable?的可能重复

标签： javascript jquery jquery-ui drag-and-drop jquery-ui-draggable

【解决方案1】：

您需要在追加元素后使元素可拖动，如以下小提琴所示：https://jsfiddle.net/5b3nfm11/1/

$(document).ready(function(){

  $("#veggies li").click(function(){
    $(this).clone().appendTo("#dirt").draggable({
      containment: '#dirt'
    });

  });

});

【讨论】：

太棒了！谢谢，我知道它必须是这么简单的事情！

【解决方案2】：

看起来您应该让#veggies 列表项可拖动，而不是在单击时附加它们。

这应该可行。

$(document).ready(function(){

 $("#veggies li").draggable(function(){
  $(this).clone().appendTo("#dirt")
 });
});

【讨论】：