jQuery UI可拖动和可拖放项变为不可拖动

我有两个div:#leftDiv和#mainDiv#leftDiv包含一些列表项,这些列表项可以拖放到#mainDiv中,但有一个问题,在#mainDiv中的drop元素变为不可拖放后。我能用这个做什么?这是我的剧本:

$(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 可拖放到用户想要的任何地方。