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

Question

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

在我看来，这种情况只有在使用恢复功能时才会发生，因为在禁用的 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

我想说这是正确的行为。

禁用的可放置区域就像任何其他不可放置区域一样。当您将可拖动对象拖放到窗口中的其他位置时，您会得到相同的行为。

考虑一下需要在 drop 上执行某些逻辑的其他用户，无论它是否是有效的 drop。例如，用户只被给予 n 次掉落的游戏，无论它们是否有效，或者类似的场景。如果对于无效的放置根本不触发放置事件，他们会提示他们需要一种方法来检测放置。

考虑在恢复后调用放置处理程序，这就是您所要求的 -

这根本没有道理。掉落首先发生，是否恢复的决定是根据掉落的元素之后掉落而决定的。这并不是说如果您将无效的项目悬停在可放置的项目上，它就会恢复原样。 丢弃需要发生，并且用户需要一种方法来识别它的发生。

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

<小时/>

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

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