Jquery UI 可掉落的还原不能再次掉落

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，一个要禁用其他的，另一个要 return 到。

考虑以下示例：

$(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 不接受该项目或 returns false，则当 invalid 是首选项时该项目将被还原。

Jquery UI 可掉落的还原不能再次掉落

Jquery UI Droppable revert cannot drop again

javascript

jquery

jquery-ui

jquery-ui-droppable