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

问题描述

我正在使用jQuery 可拖动和

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?

推荐答案

这可能是一个相关的错误报告，已经存在了一段时间:

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..确保已设置父元素(如果是主体，则为事件).我的测试表明，此解决方案可以解决此问题，但是会禁用自动滚动功能.您仍然可以使用鼠标滚轮或箭头键进行滚动.

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..如果您确信每种浏览器都会发生这种情况，则可以将这些hacks放入受影响的可拖动对象的事件中，以更正计算结果.尽管有很多不同的浏览器需要测试，所以只能将其用作最后的选择:

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屋！