Jquery UI Droppable revert不能再次删除

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

更新

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

$(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();
});

Answer 1

您需要一个放置 .word 的位置，一个是您要禁用其他的位置，一个是返回的位置。

考虑以下示例：

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

  function toggleOtherDraggable() {
    if ($(".words .word").eq(0).hasClass("ui-draggable-disabled")) {
      $(".words .word").draggable('enable');
    } else {
      $(".words .word").draggable('disable');
    }
  }

  function createDropWord() {
    $(".words").droppable({
      tolerance: 'touch',
      accept: '.word',
      drop: function(event, ui) {
        var item = ui.draggable;
        item.removeAttr("style");
        $(this).append(item);
      }
    });
  }

  function createDropStage() {
    $('.drop').droppable({
      tolerance: 'touch',
      accept: '.word',
      drop: function(event, ui) {
        var item = ui.draggable;
        item.appendTo(this).position({
          my: "center",
          at: "center",
          of: $(this),
          using: function(pos) {
            $(this).animate(pos, 200, "linear");
          }
        }).css('background', "transparent");
        toggleOtherDraggable();
        createDropWord()
      },
      out: function() {
        toggleOtherDraggable();
      }
    });
  }

  createDraggable($(".words > .word"));
  createDropStage();
});

.word {
  display: inline-block;
  padding: .25em;
}

.drop {
  width: 340px;
  height: 100px;
  background: #CCC;
  margin: 20px;
}

.word.ui-draggable-disabled {
  opacity: 0.45;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="stage">
  <div class="ui-widget words">
    <div id="word-1" class="word ui-widget-content">Word 1</div>
    <div id="word-2" class="word ui-widget-content">Word 2</div>
    <div id="word-3" class="word ui-widget-content">Word 3</div>
    <div id="word-4" class="word ui-widget-content">Word 4</div>
  </div>
  <div class="drop"></div>
</div>

当您第一次拖放到.drop 区域时，这会将放置的对象居中并同时禁用其他可拖动对象，因此它们不能被拖入。当项目被拖出时，它们会重新启用。

您必须使用.append() 或.appendTo() 以便将丢弃的项目添加到容器中。这适用于这两个元素。

revert 选项仅在特定丢弃情况下启用。如果 droppable 不接受该项目或返回 false，则当 invalid 是首选时，该项目将被还原。