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

Posted 2023-05-08

【中文标题】JQueryUI droppable drop 事件在恢复之前触发

【英文标题】：JQueryUI droppable drop event fires before reverting

【发布时间】：2016-04-06 15:17:28

【问题描述】：

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

在我看来，这只有在使用 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/

【问题讨论】：

请查看jsfiddle.net/ugywztgw/2

@Parth “返回真”；意在， if 语句是我要添加到还原函数的额外检查的占位符。

现在有什么问题？你不想让 box 回到之前的位置吗？

正如我在问题中所说，drop 函数在还原发生之前触发。如果您查看 jsfiddle 并拖动到第一个 droppable，您将看到该行为。

一切正常。如果你使用 droppable 那么它应该首先调用 drop event 如果 drop 成功然后在它恢复之后。请查看jsfiddle.net/ugywztgw/3

【参考方案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>

【讨论】：

不，正如我所谈到的，在这两种情况下都不会触发 drop 函数。我在更新的小提琴中让它变得更加明显：link

@Mike 在你的小提琴中，drop 回调确实会触发，并且在启用 droppable 的情况下背景会变为红色... “droppable drop event 在恢复之前触发” 是你的问题标题......我试图解释的是逻辑上预期的行为

是的，但整个问题是，为什么它只在 1 个 droppable 上触发，而 NOT 在另一个上触发？

@Mike 因为它被禁用了..！它已被禁用，因此无法丢弃。将其视为任何其他正常元素，因为它的可丢弃功能已完全禁用！为什么当你把它放在身体里时不会调用 drop ..？因为它目前不是可丢弃的。禁用的 droppable 就是这样。是不是很容易理解..？你不能把东西放进一个封闭的罐子里，而它是封闭的。因为它是关闭的，所以根本不会掉进罐子里。在另一种情况下，罐子是打开的，你把东西放进去，然后决定是否把它拿出来。查看更新的答案。

我认为决定它是否有效的函数仍将在禁用的 droppable 上运行，谢谢 TJ，这就是我正在寻找的答案。