JQueryUI droppable drop 事件在还原之前触发

Question

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

在我看来，这只有在使用恢复功能时才会发生，因为在禁用的可放置物品上它会正常运行。

$( ".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 与任何其他 non-drop 区域一样。当您将可拖动对象放在 window.

中的其他位置时，您会得到相同的行为

考虑需要在丢弃时执行某些逻辑的其他用户，无论它是否是有效丢弃。例如，一个只给用户 n 轮到掉落的游戏，无论它们是否有效，或类似的场景。如果 non-valid 掉落事件根本没有触发，他们会抱怨他们需要一种检测掉落的方法。

考虑在还原后调用删除处理程序，这就是您要问的 -

这根本说不通。掉落先发生，是否恢复取决于掉落的物品，after drop。这不像您将 non-valid 项目悬停在可投放项目上它会恢复原样。 丢弃需要发生，用户需要一种方法来识别它的发生。

我会说这不是错误，这是针对更多用户的最合乎逻辑的行为。您需要针对您的特定场景进行变通。如何解决取决于您的具体用例。

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

$(".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>

JQueryUI droppable drop 事件在还原之前触发

JQueryUI droppable drop event fires before reverting

jquery

jquery-ui

droppable

draggable