Jquery UI Droppable还原无法再次丢弃

Question

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

要还原可拖动对象，我使用了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

Answer 1

您需要放置.word的位置，要禁用其他位置的位置，然后返回该位置。