jQuery-UI 可拖动和可放置项目变为不可拖动

Question

我有 2 个 div：#leftDiv 和 #mainDiv。 #leftDiv 包含一些列表项，可以拖放到#mainDiv 中，但是有一个问题，在#mainDiv 中放置元素后变得不可拖动。我能用这个做什么？这是我的脚本：

$(document).ready(function(){
  $('#output li').draggable({
    helper: 'clone',
    revert: 'invalid'
  });
  $('#mainDiv').droppable({
    drop: function(event, ui){
      var item = $('<div class="foo">').append(ui.draggable.text());
      $(this).append(item);
    }
  });
  $(".foo").draggable();
});

我想让#mainDiv 中的元素可拖放到用户想要的任何位置。

Answer 1

您正在创建默认情况下不可拖动的新 foos。你需要制作它们：

item.draggable();
$(this).append(item).