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 доступна только при определенных условиях отбрасывания. Если сбрасываемый элемент не примет элемент или вернет false, то элемент будет отменен, если предпочтение будет invalid.