如果在拖动时发生转换，事件检测坐标不会更新

Question

发现一个我似乎无法回避的有趣问题。

我正在尝试将一个框拖到一个可放置的 div，当 draggin 开始时它会与其父项一起过渡。

事件顺序：

开始拖动
从包含放置目标的屏幕底部绘制幻灯片
用户移动以将可拖动对象放到可放置对象上
过度事件触发
用户删除可拖动

然而，现在，大部分都很好。我发现如果在用户拖动时发生转换，可放置 的 Over 事件似乎不会触发 。

一些调查表明确实会触发，但前提是将可拖动对象拖动到可放置对象 pre transition 位置上。

如果在没有用户拖动的情况下发生转换，一切都会按预期进行。

我在这里做了一个问题模型：

http://codepen.io/anon/pen/qRRPWv?editors=1111

这是 js:

$(".ui-draggable").draggable({
  helper:"clone",
  containment:"window",
  start:function(){
    $(".holdingbox").css("bottom", 0);
  },
  stop:function(){
    $(".holdingbox").css("bottom", "-200px");
    up = false;
  }
});
$(".ui-droppable").droppable({
  over:function(){
    $("#status").val("OVER");
  },
  out:function(){
    $("#status").val("NOT OVER");
  }
});
var up = false;
$("#manual").on("click", function(){
  $(".holdingbox").css("bottom", up? "-200px" : 0);
  up = !up;
})
$("#status").val("NOT OVER");

和 html:

<input type="text" id="status"/>
<a href="#" id="manual">MANUAL TRIGGER</a>
<div class="droppable ui-draggable" style="background-color:green">
</div>

<div class="holdingbox">
  <span style="width:100%; text-align:center; display:inline-block; margin-top: 50px;">
    <span>
    <div class="droppable ui-droppable">
      </div>
      </span>

  </span>
</div>

而且，对于任何关心的人，CSS

.holdingbox{
  position:fixed;
  bottom:-200px;
  left:0px;
  width:100%;
  height:200px;
  background-color:#dbeef8;
  transition: bottom 0.2s ease-Out
}

.droppable{
  width:100px;
  height:50px;
  background-color:#ecff09;
  position:relative;
  text-align:center;
  display:inline-block;
}

在这一点上，我会很高兴有一个解决方法

Answer 1

找到了：

$( "draggable Element" ).draggable({ refreshPositions: true });

来自 jQuery UI refreshPositions 选项的可拖动文档：

If set to true, all droppable positions are calculated on every mousemove.
Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.

我花了这么长时间...

如果在拖动时发生转换，事件检测坐标不会更新

Event detection coordinates not updated if transition occurs whilst dragging

html

javascript

jquery-ui

jquery-ui-draggable

css-transitions