我正在开发一个工作计划系统，使用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,
});
有什么办法可以解决这个问题吗？
这可能与一个相关的错误报告有关，已经存在了相当长时间：http://bugs.jqueryui.com/ticket/3740
在我测试的每个浏览器上都似乎会发生这种情况（Chrome、FF4、IE9）。有几种方法可以解决这个问题：
1. 在您的CSS中使用 position:absolute;。绝对定位的元素似乎不受影响。
2. 确保父元素（即使是body）设置了 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;
}
});
overflow:auto 立即解决了问题。我将样式应用于单个表格单元格。） - Alex这个解决方案不需要调整任何位置，只需克隆该元素并将其绝对定位即可。
$(".sidebar_container").sortable({
..
helper: function(event, ui){
var $clone = $(ui).clone();
$clone .css('position','absolute');
return $clone.get(0);
},
...
});
这个帮助器可以是一个需要返回要拖动的DOM元素的函数。
position: relative，正如@Josh Bambrick所发现的那样。 - Dominicposition: relative;是绝对必要时，这是完美的修复方法。+1 - Barry Chapman这对我起作用：
start: function (event, ui) {
$(this).data("startingScrollTop",window.pageYOffset);
},
drag: function(event,ui){
var st = parseInt($(this).data("startingScrollTop"));
ui.position.top -= st;
},
"1.11.0"。 - Roman Kiselenko抱歉又写了一个回答。 由于以上回答中的解决方案都不能被我使用，所以我做了很多谷歌搜索并进行了许多令人沮丧的微小编辑，最终找到了另一个合理的解决方案。
似乎只要父元素中的任何一个拥有position属性设置为“relative”，就会出现此问题。我不得不重新排列我的标记并修改我的CSS，但是通过从所有父代中删除此属性，我能够使.sortable()在所有浏览器中正常工作。
position: relative;都会导致这种情况发生。 - wojtikuposition:relative;需要被移除。在可拖动元素和body之间的父级元素似乎并不会引起问题。 - conposition: relative修复了该问题。 - tsumnia看起来这个错误经常出现，每次都需要不同的解决方法。上面提到的任何方法或者我在互联网上找到的其他方法都没有用。 我使用的是jQuery 1.9.1和Jquery UI 1.10.3。 以下是我的解决方法：
$(".dragme").draggable({
appendTo: "body",
helper: "clone",
scroll: false,
cursorAt: {left: 5, top: 5},
start: function(event, ui) {
if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
},
drag: function(event, ui) {
if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
}
});
该代码可在FF、IE和Chrome中正常工作，我还没有在其他浏览器中进行测试。
html {overflow-y: scroll; background: #fff;}
它完美地运行了！
这个 bug 竟然存在了这么长时间，令人惊讶。对我来说，在 Safari 和 Chrome（即 Webkit 浏览器）上有问题，但在 IE7/8/9 和 Firefox 上都能正常工作。
我发现设置 absolute 或 fixed，带或不带 !important 都没有帮助，最后我在拖动处理函数中添加了一行代码：
ui.position.top += $( 'body' ).scrollTop();
我本以为需要把那行代码写成适用于Webkit内核的，但奇怪的是，在所有浏览器上都可以正常工作。（我很快会发表评论说“不，实际上它破坏了所有其他浏览器”。）
我所做的是:
$("#btnPageBreak").draggable(
{
appendTo: 'body',
helper: function(event) {
return '<div id="pageBreakHelper"><img id="page-break-img" src="page_break_cursor_red.png" /></div>';
},
start: function(event, ui) {
},
stop: function(event, ui) {
},
drag: function(event,ui){
ui.helper.offset(ui.position);
}
});
$('.dragme').draggable({
helper: 'clone',
cursor: 'move',
cursorAt: {left: 50, top: 80}
});