Question

我有一个恢复功能，所以我可以添加一些额外的检查来触发恢复。在将draggable恢复到原始位置之前，将draggable与droppable对齐的drop函数似乎已经触发。

在我看来，只有在使用了恢复功能时才会发生这种情况，因为在禁用的可放置功能上它会正常工作。

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

我会说这是正确的行为。

已禁用的droppable与任何其他非丢弃区域一样。将拖动器拖放到窗口中的其他位置时，您将获得相同的行为。

考虑需要在drop上执行某些逻辑的其他用户，无论它是否是有效的drop。例如，只有n用户被拒绝的游戏，无论它们是否有效，或类似的场景。如果丢弃事件对于无效的丢弃根本不起作用，他们会抱怨他们需要一种方法来检测丢弃。

考虑在还原后调用drop handler，这就是你要求的 -

这根本没有意义。丢弃首先发生，是否恢复的决定取决于丢弃的项目，在下降之后。这并不是说如果你将一个无效项目悬停在一个droppable上它就会恢复原状。 丢弃需要发生，用户需要一种方法来识别它。

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

在这种情况下，您可以将决定是否还原的代码移动到放置处理程序，并根据结果执行更多代码：

$(".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事件在恢复之前触发

1 个答案: