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

Question

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

我知道曾经有一个bug引起类似的行为。 但是，我使用的是jQuery（2.2.4）和jQuery UI（1.12.1）的最新版本。 我也碰到过这个线程：

jQuery Draggable在页面滚动后将助手显示在错误的位置

而且我尝试了所有的技巧以使其正确定位。 但无济于事。 即使我的控制台显示了可拖动对象的右上/左坐标。 在我的屏幕上，它仍然处于错误的位置。

同样很奇怪的是，这种行为在Mac Chrome v58中不会发生，而是在v62中开始出现。 （也许是早些，因为我还没有测试它们之间的每个版本）。 Mac上的Firefox早期版本也是如此。 同样在Safari 9.1.2（11601.7.7）中也可以正常工作。

该页面为引导程序格式。 计划内容将在div中加载。

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

Droppable附加到scheduleWeek ID的后面：

  <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>

可拖动对象被附加到可放置对象上，并仅使用标准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

我决定再给它一个尝试，并认为，如果将可拖动对象附加到动态内容div之外的元素上，则jQuery可能会正确识别窗口滚动。 这似乎可行，因此现在在添加可拖动对象之后需要重新定位，但这不是问题。 也许它可以帮助某人。