我一直在尝试为单词学习应用程序创建拖放系统，但是在我恢复并尝试再次拖动它们之后，出现了可拖动元素无法重用的问题。

为还原可拖动对象，我使用了out方法，以便将其拖回到可放置区域之外时，它将还原到其先前位置。 我这样做是通过删除可拖动实例并将其重新添加进来的，如果我尝试将同一元素拖回可放置区域，它将无法放置。我已经尝试过尝试重新初始化可放置区域，但这似乎并没有改变任何东西。

$(document).ready(function () {
  createDraggable();
  createDroppable();
});

function createDraggable(){
  $(".word").draggable({
    containment: ".stage",revert: 'invalid',revertDuration: 0
  });
}

function disableOtherDraggable(except){
  $(".word:not(#" + except.attr('id') + ")").draggable('disable');
}

function createDroppable(){
  $('.drop').droppable({
    tolerance: 'touch',accept: '.word',drop: function(event,ui) {
      ui.draggable.position({
        my: "center",at: "center",of: $(this),using: function(pos) {
          $(this).animate(pos,200,"linear");
        }
      });
      $(ui.draggable).css('background',"transparent");
      disableOtherDraggable(ui.draggable);
    },out: function(event,ui) {
      ui.draggable.mouseup(function () {
        ui.draggable.removeAttr('style');
        $(".word").draggable("destroy");
        createDraggable();
      });
    }
  });
}

我希望能够让人们丢弃这些单词，并在需要时将其拖回。在完成此工作后，我将设置一个按钮来检查所输入的单词是否正确。

在此示例中可以拖动4个单词，但范围可以是3到5

更新

这是我为感兴趣的任何人工作的更新代码。我将舞台创建为可放置区域，然后根据需要将其打开和关闭。

$(function() {
  function createDraggable(o) {
    o.draggable({
      containment: ".stage",revertDuration: 0
    });
  }

  function toggleOtherDraggable() {
    $(".words .word").each(function(i,val){
     if(!$(val).hasClass('ui-dropped')) $(val).draggable('disable');
    });
  }

  function createLineDroppable(){
    $('.drop').droppable({
      tolerance: 'touch',ui) {
        ui.draggable.position({
          my: "center",using: function(pos) {
            $(this).animate(pos,"linear");
          }
        });
        $(ui.draggable).css('background','transparent');
        $(ui.draggable).addClass('ui-dropped');
        toggleOtherDraggable();
      },out: function(){
        $('#stage-drop').droppable('enable');
      }
    });
  }

  function createStageDroppable() {
    $('#stage-drop').droppable({
      tolerance: 'touch',disabled: true,ui) {
        $(ui.draggable).css('left','0');
        $(ui.draggable).css('top','0');
        $(ui.draggable).css('background','');
        $(ui.draggable).removeclass('ui-dropped');
        $('#stage-drop').droppable('disable');
        $(".words .word").draggable('enable');
      }
    });
  }

  createDraggable($(".words .word"));
  createLineDroppable();
  createStageDroppable();
});