jQuery可拖动页面滚动后显示帮助错误的地方
我正在使用jQuery 可拖动和可 拖动的工作计划系统，我正在开发。 用户将作业拖至不同的date或用户，然后使用ajax调用更新数据。
一切工作正常，除了当我向下滚动主页面（工作出现在超过我的浏览器窗口的底部大周计划）。 如果我尝试在这里拖动一个可拖动的元素，那么元素会出现在我的鼠标光标上方，像素数量已经向下滚动。hover状态仍然正常，function很强大，但是看起来不正确。
我使用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
这似乎发生在我testing的每个浏览器（Chrome，FF4，IE9）。 有几种方法可以解决此问题：
1.使用position:absolute; 在你的CSS。 绝对定位的元素似乎不受影响。
2.确保父元素（如果它是主体的话）有overflow:auto; 组。 我的testing显示此解决scheme修复了位置，但它禁用了自动滚动function。 您仍然可以使用鼠标滚轮或箭头键进行滚动。
3.手动应用上述错误报告中build议的修复措施，并在出现其他问题时进行彻底的testing。
4.等待正式解决。 它计划到jQuery UI 1.9，虽然它已经推迟了几次。
5.如果您确信它发生在每个浏览器上，您可以将这些黑客放入受影响的可拖动的事件中来纠正计算。 这是很多不同的浏览器来testing，所以它只能作为最后的手段：
$('.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; } });
这个解决scheme在不调整任何东西的位置的情况下工作，您只需克隆元素并将其完全定位。
$(".sidebar_container").sortable({ .. helper: function(event, ui){ var $clone = $(ui).clone(); $clone .css('position','absolute'); return $clone.get(0); }, ... });
助手可以是一个需要返回DOM元素拖动的函数。
这对我工作：
start: function (event, ui) { $(this).data("startingScrollTop",window.pageYOffset); }, drag: function(event,ui){ var st = parseInt($(this).data("startingScrollTop")); ui.position.top -= st; },
看起来这个bug经常出现，每次都有不同的解决scheme。 以上都没有，或者我在互联网上find的其他东西都起作用了。 我正在使用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，我还没有在其他浏览器上testing过。
对不起，再写一个答案。 由于上述答案中没有任何解决scheme可以用于我，所以我做了很多Googlesearch，并在find另一个合理的解决scheme之前做了许多令人沮丧的小修改。
每当任何父元素的position设置为“相对”时，就会出现此问题。 我不得不重新洗牌我的标记并改变我的CSS，但通过从所有父母中删除此属性，我能够得到.sortable()在所有浏览器中正常工作。
这个bug已经转移到http://bugs.jqueryui.com/ticket/6817 ，并且在大约5天前（2013年12月16日左右）已经被修正了。 现在的build议是使用http://code.jquery.com/ui/jquery-ui-git.js的最新开发版本，或等待;版本1.10.4，它应该包含此修复程序 。
编辑：看来这个修补程序现在可能是http://bugs.jqueryui.com/ticket/9315的一部分，这是不计划直到版本1.11。; 使用上面链接的源代码pipe理版本的jQuery似乎解决了我和@Scott Alexander（下面的评论）的问题。
我删除了溢出：
html {overflow-y: scroll; background: #fff;}
它完美的作品！
似乎不寻常的是，这个错误应该已经解决了这么久。 对我来说，这是一个Safari和Chrome（即WebKit浏览器）的问题，但不是在IE7 / 8/9，也不是在Firefox的一切工作正常。
我发现设置绝对或固定，有或没有！重要，没有帮助，所以最后我添加了一条线到我的拖动处理函数：
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); } });
我并不完全确定这种方法在任何情况下都能正常工作，但是我只是在所有需要testing的各种情况下为我工作（以及以前提出的解决scheme在这里和其他地方都失败了）
(function($){ $.ui.draggable.prototype._getRelativeOffset = function() { if(this.cssPosition == "relative") { var p = this.element.position(); return { top: p.top - (parseInt(this.helper.css("top"),10) || 0)/* + this.scrollParent.scrollTop()*/, left: p.left - (parseInt(this.helper.css("left"),10) || 0)/* + this.scrollParent.scrollLeft()*/ }; } else { return { top: 0, left: 0 }; } }; }(jQuery));
（我把它提交给jQuery.ui跟踪器，看看他们怎么看待这个问题。如果这个4年前的bug能够最终得到纠正，那将是很酷的：/）
我在Firefox 21.0上使用JQuery可拖动，我有同样的问题。 光标在助手图像上方保持一英寸。 我认为这是Jquery本身还没有解决的问题。 我find了解决这个问题的方法，它使用了可拖动的“cursorAt”属性。 我用它如下，但可以根据自己的要求更改。
$('.dragme').draggable({ helper: 'clone', cursor: 'move', cursorAt: {left: 50, top: 80} });
注意： 这将适用于所有浏览器，所以在使用此代码后，请在所有浏览器中检查您的页面以获取正确的左侧和顶部位置。
在适应了我已经阅读过的所有内容之后，这对我来说是有效的。
$(this).draggable({ ... start: function (event, ui) { $(this).data("scrollposTop", $('#elementThatScrolls').scrollTop(); $(this).data("scrollposLeft", $('#elementThatScrolls').scrollLeft(); }, drag: function (event, ui) { ui.position.top += $('#elementThatScrolls').scrollTop(); ui.position.left += $('#elementThatScrolls').scrollLeft(); }, ... });
* elementThatScrolls是父类或祖先的溢出：auto;
绘制滚动元素的位置，并在每次移动/拖动时将其添加到助手的位置。
希望能帮助某人，因为我在这个时候浪费了大量的时间。
这似乎做了解决方法，而不需要使用的位置：父母的绝对:)
$("body").draggable({ drag: function(event, ui) { return false; } });
我设法解决相同的问题，添加display: inline-block到拖动的项目
添加position: relative没有为我工作（jQuery覆盖与position: absolute拖动开始）
使用的jQuery版本：
- jQuery – 1.7.2
- jQuery UI – 1.11.4
我退出使用jQueryUi可拖动和移动使用更好的插件叫jquery.even.drag ，更小的代码大小，没有所有的废话jQueryUI了。
我已经做了一个演示页面使用这个插件内的位置：固定的容器
演示
希望这有助于某人，因为这个问题是大的。
我有类似的问题，只有在Windows 8上运行特定的IE 10。所有其他浏览器工作正常。 删除cursorAt：{top：0}解决了这个问题。
我在这里尝试了各种答案，包括更新jQuery，发现这对我有用。 我testing了最新的铬和IE浏览器。 我想这将是一个问题，根据你的用户界面布局，不同的解决scheme。
$('{selector}').draggable({ start: function(event, ui) { ui.position.top -= $(document).scrollTop(); }, drag: function(event, ui) { ui.position.top -= $(document).scrollTop(); } });
为什么不拿光标位置？ 我使用可sorting的插件，我修复这个代码：
sort: function(e, ui) { $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY}); }
我有同样的问题，并发现这一切都是因为一个引导的navbar“navbar-fixed-top”类的位置固定，下移我的<body> 60px低于<html>顶部。 所以当我在我的网站中移动可拖动的表单时，光标出现在窗体顶部60px。
您可以看到，在Chromedebugging工具中，在Elements界面中，点击<body>标签，就会看到top和body之间有空隙。
因为我在我的应用程序中使用了这个导航栏，并且不想修改我的初始化调用来拖拽每个表单（根据DarthJDG的过程）。 我决定以这种方式扩展可拖动小部件，并简单地在可拖动初始化中添加一个yOffset。
(function($) { $.widget("my-ui.draggable", $.ui.draggable, { _mouseDrag: function(event, noPropagation) { //Compute the helpers position this.position = this._generatePosition(event); this.positionAbs = this._convertPositionTo("absolute"); //Call plugins and callbacks and use the resulting position if something is returned if (!noPropagation) { var ui = this._uiHash(); if(this._trigger('drag', event, ui) === false) { this._mouseUp({}); return false; } this.position = ui.position; } // Modification here we add yoffset in options and calculation var yOffset = ("yOffset" in this.options) ? this.options.yOffset : 0; if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px'; if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top-yOffset+'px'; if($.ui.ddmanager) $.ui.ddmanager.drag(this, event); return false; } }); })(jQuery);
现在，当我使用bootstrap导航栏初始化站点中的可拖动元素/窗体时：
// Make the edit forms draggable $("#org_account_pop").draggable({handle:" .drag_handle", yOffset: 60});
当然，你将不得不根据自己的网站进行实验来确定正确的yOffset。
无论如何，感谢DarthJDG指出了正确的方向。 干杯!
