Question

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

Answer 1

你需要在追加它之后使元素可拖动，如下所示：https://jsfiddle.net/5b3nfm11/1/

$(document).ready(function(){

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

  });

});

Answer 2

看起来您应该将#veggies列表项设置为可拖动，而不是在点击时附加它们。

这应该有用。

$(document).ready(function(){

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

无法拖动附加的项目

2 个答案: