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

Question

我正在使用 jQuery draggable和 droppable对于我正在开发的工作计划系统。用户将作业拖到不同的日期或用户，然后使用 ajax 调用更新数据。

一切正常，除了当我向下滚动主页时​​(工作出现在超出浏览器窗口底部的大型周计划表上)。如果我尝试在此处拖动一个可拖动元素，该元素出现在我的鼠标光标上方的像素数量与我向下滚动时的像素数量相同。悬停状态仍然可以正常工作并且功能正常，但看起来不正确。

我正在使用 jQuery 1.6.0 和 jQuery UI 1.8.12。

我确定我需要添加一个偏移函数，但我不知道在哪里应用它，或者是否有更好的方法。这是我的 .draggable() 初始化代码:

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});

知道我能做些什么来解决这个问题吗？

Answer 1

这可能是一个相关的错误报告，它已经存在了很长一段时间:http://bugs.jqueryui.com/ticket/3740

这似乎发生在我测试过的每个浏览器(Chrome、FF4、IE9)上。有几种方法可以解决此问题:

1. 在您的 CSS 中使用 position:absolute;。绝对定位的元素似乎不受影响。

2. 确保父元素(如果是正文则为事件)设置了overflow:auto;。我的测试表明这个解决方案修复了位置，但它禁用了自动滚动功能。您仍然可以使用鼠标滚轮或箭头键滚动。

3. 手动应用上述错误报告中建议的修复，并彻底测试它是否会导致其他问题。

4. 等待官方修复。它计划用于 jQuery UI 1.9，尽管过去已被推迟了几次。

5. 如果您确信它会在每个浏览器上发生，您可以将这些 hack 放入受影响的可拖动对象的事件中以更正计算。虽然有很多不同的浏览器需要测试，所以它只能作为最后的手段使用:

$('.drag').draggable({
   scroll:true,
   start: function(){
      $(this).data("startingScrollTop",$(this).parent().scrollTop());
   },
   drag: function(event,ui){
      var st = parseInt($(this).data("startingScrollTop"));
      ui.position.top -= $(this).parent().scrollTop() - st;
   }
});