无法拖动附加的项目

Not able to drag appended items

本文关键字：项目 拖动      更新时间：2023-09-26

我正在尝试使用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>

您需要在添加元素后使其可拖动，如下fiddle所示：https://jsfiddle.net/5b3nfm11/1/

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

看起来你应该让你的#素食列表项目可以拖动，而不是在点击时添加它们。

这应该行得通。

$(document).ready(function(){
 $("#veggies li").draggable(function(){
  $(this).clone().appendTo("#dirt")
 });
});
相关文章：