jQuery - 窗口滚动后的可拖动位置问题

Question

我使用由droppable（空时隙）和draggables（计划项目）组成的计划网格动态加载。我的问题是，当我向下滚动页面后，选择一个拖动不会出现在光标（或它最初的位置），但向上移动的位置与我向下滚动的数量相同。 （见图像：鼠标光标位于15:00，屏幕显示可拖动的位置）

我知道曾经有一个导致类似行为的错误。但是我使用最新版本的jQuery（2.2.4）和jQuery UI（1.12.1）。我也遇到了这个帖子：

jQuery draggable shows helper in wrong place after page scrolled

我已经尝试了所有的黑客手机以使其正确定位。但无济于事。即使我的控制台显示可拖动的右上/左坐标。在我的屏幕上，它仍处于错误的位置。

同样非常奇怪的是，这种行为在Mac Chrome v58中不会发生，但在v62中开始显示。 （也许更快，因为我没有测试过它们之间的每个版本）。对于Mac上的Firefox以前版本也是如此。在Safari 9.1.2（11601.7.7）中也可以正常使用。

该页面采用bootstrap格式。计划内容加载在div中。

<div id="content"></div>

Droppable附加到scheduleWeek id＆＃39; s：

  <div class="row">
    <div class="col-xs-6 nopadding">
      <div id="scheduleWeek1" class="col-xs-3 nopadding">
       <!-- TIMESLOTS WEEK #1  -->
      </div>
      <div id="scheduleWeek2" class="col-xs-3 nopadding">
        <!-- TIMESLOTS WEEK #2 -->
      </div>
      <div id="scheduleWeek3" class="col-xs-3 nopadding">
       <!-- TIMESLOTS WEEK #3 -->
      </div>
      <div id="scheduleWeek4" class="col-xs-3 nopadding">
        <!-- TIMESLOTS WEEK #4 -->
      </div>
    </div>

Draggables被附加到droppables并且仅使用标准jQuery激活：

$( ".ui-draggable" ).draggable({
  snap: ".droppable",
  snapMode: "inner",
  opacity: .4,
  cursor:'move'
});

.ui-draggable 
{ 
  width: 100%; 
  height: 30px;
  padding: 0;
  position:absolute;
  margin: 0;
  z-index:2;
  border: 1px solid;
}
.droppable { 
  width: 100%; 
  height: 30px; 
  padding: 0px; 
  float: left; 
  margin: 0px;
  border-top: 1px dashed;
  border-left: 1px dashed;
  border-top: 1px dashed;
  background:#FFF; 
 });

Answer 1

我决定再给它一个尝试，并想通知如果draggables被附加到动态内容div之外的元素，也许jQuery可以正确地识别窗口滚动。这似乎有效，所以现在追加拖动后需要重新定位，但这不是问题。也许它有助于某人。