Откат Jquery UI Droppable не может снова упасть

Я пытался создать систему перетаскивания для приложения для изучения слов и столкнулся с проблемой, связанной с невозможностью повторного использования перетаскиваемых элементов после того, как я верну их и попытаюсь перетащить их снова.

Чтобы вернуть перетаскиваемый объект, я использовал метод 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",
      revert: 'invalid',
      revertDuration: 0
    });
  }

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

  function createLineDroppable(){
    $('.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');
        $(ui.draggable).addClass('ui-dropped');
        toggleOtherDraggable();
      },
      out: function(){
        $('#stage-drop').droppable('enable');
      }
    });
  }

  function createStageDroppable() {
    $('#stage-drop').droppable({
      tolerance: 'touch',
      accept: '.word',
      disabled: true,
      drop: function(event, 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();
});