jQuery draggable在页面滚动后在错误的位置显示帮助器

Question

我正在使用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,
});

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

Answer 1

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

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

1.position:absolute;在你的CSS中使用.绝对定位的元素似乎没有受到影响.

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

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

4.等待官方补丁.它被安排到jQuery UI 1.9,虽然它已经被推迟了几次.

5.如果您确信它在每个浏览器上都会发生,您可以将这些黑客放入受影响的可拖动事件中以纠正计算.虽然要测试很多不同的浏览器,但它应该只作为最后的手段使用:

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

Answer 2

此解决方案无需调整任何内容的定位即可工作,您只需克隆元素并使其绝对定位即可.

$(".sidebar_container").sortable({
  ..
  helper: function(event, ui){
    var $clone =  $(ui).clone();
    $clone .css('position','absolute');
    return $clone.get(0);
  },
  ...
});

帮助器可以是一个需要返回DOM元素以进行拖动的函数.

Answer 3

这对我有用:

start: function (event, ui) {
   $(this).data("startingScrollTop",window.pageYOffset);
},
drag: function(event,ui){
   var st = parseInt($(this).data("startingScrollTop"));
   ui.position.top -= st;
},

Answer 4

很抱歉写了另一个答案.由于上述答案中没有一个解决方案可以被我使用,我做了很多谷歌搜索,并在找到另一个合理的解决方案之前进行了许多令人沮丧的小编辑.

只要任何父元素position设置为"相对",就会出现此问题.我不得不重新调整我的标记并改变我的CSS,但是通过从所有父母中删除这个属性,我能够.sortable()在所有浏览器中正常工作.

Answer 5

看起来这个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();
  }
});

适用于FF,IE,Chrome,我还没有在其他浏览器中测试过.

Answer 6

我删除溢出：

html {overflow-y: scroll; background: #fff;}

而且效果很好！

Answer 7

这个bug被移到了http://bugs.jqueryui.com/ticket/6817,并且大约5天前(2013年12月16日左右)似乎终于被修复了.现在的建议是使用http://code.jquery.com/ui/jquery-ui-git.js中的最新开发版本或等待应该包含此修复的版本1.10.4.

编辑: 似乎此修复程序现在可能是http://bugs.jqueryui.com/ticket/9315的一部分,它不会计划在版本1.11之前删除.使用上面链接的源控件版本的jQuery似乎确实解决了我和@Scott Alexander的问题(下面的评论).