jQuery draggable 在页面滚动后在错误的位置显示助手 [英] jQuery draggable shows helper in wrong place after page scrolled

问题描述

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

I'm using jQuery draggable and droppable for 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.

一切正常，除非我向下滚动主页(工作出现在超出浏览器窗口底部的大型周计划表上).如果我尝试在此处拖动可拖动元素，则该元素会出现在我鼠标光标上方的像素数与我向下滚动时的像素数相同.

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.

我使用的是 jQuery 1.6.0 和 jQuery UI 1.8.12.

I'm using jQuery 1.6.0 and jQuery UI 1.8.12.

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

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:

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

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

Any idea what I can do to fix this?

推荐答案

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

This might be a related bug report, it's been around for quite a while: http://bugs.jqueryui.com/ticket/3740

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

It seems to happen on every browser I tested (Chrome, FF4, IE9). There are a few ways you can work around this issue:

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

1. Use position:absolute; in your css. Absolutely positioned elements don't seem to be affected.

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

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.

3. 手动应用上述错误报告中建议的修复程序，如果它导致其他问题，请彻底测试.

3. Apply the fix suggested in the above bug report manually and test thouroughly if it causes other problems.

4. 等待官方修复.它计划在 jQuery UI 1.9 中发布，尽管它在过去被推迟了几次.

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.

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

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:

$('.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;
   }
});

这篇关于jQuery draggable 在页面滚动后在错误的位置显示助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！