jQuery draggable 在页面滚动后在错误的位置显示助手
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5791886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery draggable shows helper in wrong place after page scrolled
提问by Alex
I'm using jQuery draggableand droppablefor a work-planning system I'm developing. Users drag jobs to a different day or user, and then data is updated using an ajax call.
我正在为我正在开发的工作计划系统使用 jQuery draggable和droppable。用户将作业拖到不同的日期或用户，然后使用 ajax 调用更新数据。
Everything works fine, except when I scroll down the main page (Jobs appear on a large week planner that exceeds the bottom of my browser window). If I try and drag a draggable element here, the element appears above my mouse cursor the same amount of pixels as I've scrolled down.. The hover state still works fine and the functionality is bang on but it doesn't look right.
一切正常，除非我向下滚动主页（工作出现在超出浏览器窗口底部的大型周计划表上）。如果我尝试在此处拖动可拖动元素，则该元素会出现在鼠标光标上方，与我向下滚动时的像素数量相同。
I'm using jQuery 1.6.0 and jQuery UI 1.8.12.
我使用 jQuery 1.6.0 和 jQuery UI 1.8.12。
I'm sure there's a offset function I need to add but I don't know where to apply it, or if there's a better way. Here's my .draggable()initialisation code:
我确定我需要添加一个偏移函数，但我不知道在哪里应用它，或者是否有更好的方法。这是我的.draggable()初始化代码：
$('.job').draggable({
zIndex: 20,
revert: 'invalid',
helper: 'original',
distance: 30,
refreshPositions: true,
});
Any idea what I can do to fix this?
知道我能做些什么来解决这个问题吗？
回答by DarthJDG
This might be a related bug report, it's been around for quite a while: http://bugs.jqueryui.com/ticket/3740
这可能是一个相关的错误报告，它已经存在了一段时间：http: //bugs.jqueryui.com/ticket/3740
It seems to happen on every browser I tested (Chrome, FF4, IE9). There are a few ways you can work around this issue:
它似乎发生在我测试的每个浏览器（Chrome、FF4、IE9）上。有几种方法可以解决此问题：
1.Use position:absolute;in your css. Absolutely positioned elements don't seem to be affected.
1.position:absolute;在你的css中使用。绝对定位的元素似乎不受影响。
2.Make sure the parent element (event if it's the body) has overflow:auto;set. My test showed that this solution fixes the position, but it disables the autoscroll functionality. You can still scroll using the mousewheel or the arrow keys.
2.确保父元素（如果是主体则是事件）已overflow:auto;设置。我的测试表明此解决方案修复了位置，但它禁用了自动滚动功能。您仍然可以使用鼠标滚轮或箭头键滚动。
3.Apply the fix suggested in the above bug report manually and test thouroughly if it causes other problems.
3.手动应用上述错误报告中建议的修复程序，如果它导致其他问题，请彻底测试。
4.Wait for an official fix. It's scheduled to jQuery UI 1.9, although it has been postponed a few times in the past.
4.等待官方修复。它计划在 jQuery UI 1.9 中发布，尽管它在过去被推迟了几次。
5.If you're confident that it happens on every browser, you can put these hacks into the affected draggables' events to correct the calculations. It's a lot of different browsers to test though, so it should only be used as a last resort:
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;
}
});
回答by mordy
This solution works without adjusting the positioning of anything, you just clone the element and make it absolutely positioned.
此解决方案无需调整任何位置的位置即可工作，您只需克隆元素并使其绝对定位。
$(".sidebar_container").sortable({
..
helper: function(event, ui){
var $clone = $(ui).clone();
$clone .css('position','absolute');
return $clone.get(0);
},
...
});
The helper can be a function which needs to return the DOM element to drag with.
helper 可以是一个函数，它需要返回要拖动的 DOM 元素。
回答by Ashraf Fayad
This worked for me:
这对我有用：
start: function (event, ui) {
$(this).data("startingScrollTop",window.pageYOffset);
},
drag: function(event,ui){
var st = parseInt($(this).data("startingScrollTop"));
ui.position.top -= st;
},
回答by kazmer
It looks like this bug comes around very often, and every time there is a different solution. None of the above, or anything else I found on the internet worked. I'm using jQuery 1.9.1 and Jquery UI 1.10.3. This is how I fixed it:
看起来这个bug经常出现，每次都有不同的解决方案。以上都没有，或者我在互联网上找到的任何其他东西都不起作用。我使用 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();
}
});
Works in FF, IE, Chrome, I've not yet tested it in other browsers.
适用于 FF、IE、Chrome，我还没有在其他浏览器中测试过。
回答by Joshua Bambrick
Sorry for writing another answer. As none of the solutions in the above answer could be used by me I did a lot of Googling and made many frustrating minor edits before finding another reasonable solution.
抱歉写了另一个答案。由于我无法使用上述答案中的任何解决方案，因此在找到另一个合理的解决方案之前，我进行了大量谷歌搜索并进行了许多令人沮丧的小编辑。
This issue seems to occur whenever anyof the parent elements have positionset to 'relative'. I had to reshuffle my markup and alter my CSS but by removing this property from all parents, I was able to get .sortable()working properly in all browsers.
每当任何父元素position设置为“相对”时，似乎都会出现此问题。我不得不重新调整我的标记并更改我的 CSS，但是通过从所有父级中删除此属性，我能够.sortable()在所有浏览器中正常工作。
回答by Patrick
This bug got moved to http://bugs.jqueryui.com/ticket/6817and, as of about 5 days ago (Dec 16, 2013 or thereabout) appears to have finally been fixed. The suggestion right now is to use the latest development build from http://code.jquery.com/ui/jquery-ui-git.jsor wait for version 1.10.4 which should contain this fix.
此错误已移至http://bugs.jqueryui.com/ticket/6817，截至大约 5 天前（2013 年 12 月 16 日左右）似乎终于得到修复。现在的建议是使用来自http://code.jquery.com/ui/jquery-ui-git.js的最新开发版本或等待版本 1.10.4 应该包含此修复程序。
Edit:It seems this fix might now be part of http://bugs.jqueryui.com/ticket/9315which isn't scheduled to drop until version 1.11. Using the above linked source control version of jQuery does seem to fix the issue for me and @Scott Alexander (comment below).
编辑：似乎此修复程序现在可能是http://bugs.jqueryui.com/ticket/9315 的一部分，该修复程序计划在 1.11 版之前发布。使用上面链接的 jQuery 源代码控制版本似乎确实为我和 @Scott Alexander（下面的评论）解决了这个问题。
回答by Miguel Puig
I delete the overflow:
我删除溢出：
html {overflow-y: scroll; background: #fff;}
And it works perfectly!
它完美地工作！
回答by Allen
Seems remarkable that this bug should have gone unfixed so long. For me it's a problem on Safari and Chrome (i.e. the webkit browsers) but not on IE7/8/9 nor on Firefox which all work fine.
这个错误应该这么长时间没有修复似乎很了不起。对我来说，这是 Safari 和 Chrome（即 webkit 浏览器）上的问题，但在 IE7/8/9 和 Firefox 上都没有问题，它们都可以正常工作。
I found that setting absolute or fixed, with or without !important, didn't help so in the end I added a line to my drag handler function:
我发现设置绝对或固定，有或没有！important，都没有帮助，所以最后我在我的拖动处理程序函数中添加了一行：
ui.position.top += $( 'body' ).scrollTop();
I was expecting to need to make that line webkit-specific but curiously it worked fine everywhere. (Expect a comment from me soon saying 'er no, actually it messed up all the other browsers'.)
我希望需要使该行特定于 webkit，但奇怪的是它在任何地方都运行良好。（期待我很快发表评论说'不，实际上它搞砸了所有其他浏览器'。）
回答by Pankaj Sharma
what i have done is:
我所做的是：
$("#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);
}
});
回答by vor
I'm not fully sure that this will work in every case but this workaround I just did work for me on all the various situations I had to test (and where the previous proposed solutions given here and elsewhere all failed)
我不完全确定这在每种情况下都有效，但这种解决方法我只是在我必须测试的所有各种情况下为我工作（以及之前在这里和其他地方给出的建议解决方案都失败了）
(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));
( I submitted it to the jQuery.ui tracker to see what they think about it.. would be cool if that 4year old bug could be finally corrected :/ )
（我将它提交给 jQuery.ui 跟踪器，看看他们是怎么想的。如果这个 4 年的 bug 最终能得到纠正，那就太酷了：/）
