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

Posted 2023-05-08

【中文标题】jQuery - 窗口滚动后的可拖动位置问题

【英文标题】：jQuery - draggable position issue after window scroll

【发布时间】：2018-05-02 10:58:46

【问题描述】：

我使用由可放置（空时隙）和可拖动（计划项目）组成的计划网格动态加载。我的问题是，当我向下滚动页面后，选择一个可拖动对象不会出现在光标处（或它最初的位置），而是将其位置向上移动我向下滚动的相同数量。 （见图：鼠标光标在 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) 中也可以正常工作。

页面为引导格式。计划内容加载在一个 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>

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

【参考方案1】：

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