JQueryUI droppable drop 事件在恢复之前触发

Question

我有一个还原功能，所以我可以添加一些额外的检查来触发还原。将可拖动对象与可放置对象对齐的放置功能似乎在可拖动对象恢复到其原始位置之前触发。

在我看来，这只有在使用 revert 功能时才会发生，因为在禁用的 droppable 上它会正常运行。

$( ".box" ).draggable({
  revert: function(socketObj) {
    if (socketObj === false) {
      return true;
    } else {
        if ( $(this).hasClass("box") ) {
        return true;
      }
      return false;
    }
  },
});

$( ".ru" ).droppable({
  drop: function( event, ui ) {
    ui.draggable.position({
      of: $(this),
      my: 'left top',
      at: 'left top'
    });
  }
});

https://jsfiddle.net/ugywztgw/

Answer 1

我会说这是正确的行为。

Disabled droppable 就像任何其他非放置区域一样。当您将可拖动对象放在窗口中的其他位置时，您将获得相同的行为。

想想其他需要在 drop 时执行一些逻辑的用户，无论它是否是有效的 drop。例如一个游戏，其中用户只有n 轮流放弃，无论它们是否有效，或类似的场景。如果 drop 事件根本没有针对无效的 drop 触发，他们会抱怨他们需要一种检测 drop 的方法。

考虑在还原后调用 drop 处理程序，这就是您所要求的 -

这根本没有意义。掉落首先发生，是否恢复的决定是根据掉落的物品，在掉落之后做出的。如果您将无效项目悬停在可放置的项目上，它不会恢复原状。 需要发生丢弃，用户需要一种方法来识别它发生了。

我会说这不是错误，这是针对大量用户的最合乎逻辑的行为。您需要针对您的特定情况进行解决。如何解决取决于您的具体用例。

---

在这种情况下，您可以将决定是否恢复的代码移至放置处理程序，并根据结果执行进一步的代码：

$(".box").draggable({
  revert: function(elm) {
    return !elm || $(this).hasClass('invalid');
  }
});

$(".ru").droppable({
  drop: function(event, ui) {
    if (ui.draggable.hasClass("box")) {
      return ui.draggable.addClass("invalid");
    }
    ui.draggable.position({
      of: $(this),
      my: 'left top',
      at: 'left top'
    });
  }
});

$("#ru4").droppable("option", "disabled", true);

.box {
  background-color: teal;
  width: 200px;
  height: 30px;
  position: absolute;
}
.ru {
  width: 300px;
  height: 30px;
  margin-top: 1px;
  background-color: #888;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="containment">
  <div id='ru1' class='ru'>
    <div class="box">Drag me</div>
  </div>
  <div id='ru2' class='ru'>Drops then reverts</div>
  <div id='ru4' class='ru'>Disabled - reverts normally</div>
</div>