页面滚动后，jQuery 可拖动在错误的位置显示帮助程序

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< /a>

这似乎发生在我测试的每个浏览器上（Chrome、FF4、IE9）。有几种方法可以解决此问题：

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

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

3.手动应用上述错误报告中建议的修复，并彻底测试是否会导致其他问题。

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

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;
   }
});

Answer 2

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

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

helper 可以是一个需要返回 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

抱歉写了另一个答案。
由于我无法使用上述答案中的任何解决方案，因此在找到另一个合理的解决方案之前，我进行了大量的谷歌搜索并进行了许多令人沮丧的小编辑。

只要任何父元素的位置设置为“相对”，就会出现此问题。我必须重新调整我的标记并更改我的 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

此错误已移至 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 的问题（下面的评论）。

Answer 8

这个错误这么长时间都没有得到修复，这似乎很了不起。对我来说，这在 Safari 和 Chrome（即 webkit 浏览器）上是一个问题，但在 IE7/8/9 和 Firefox 上都没有问题，它们都工作正常。

我发现设置绝对或固定，带或不带 !important 都没有帮助，所以最后我在拖动处理函数中添加了一行：

ui.position.top += $( 'body' ).scrollTop();

我期望需要使该行特定于 webkit，但奇怪的是它在任何地方都工作得很好。 （预计我很快就会发表评论说“呃不，实际上它弄乱了所有其他浏览器”。）

Answer 9

我所做的是：

$("#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);
         }
        });

Answer 10

我在 Firefox 21.0 上使用 JQuery Draggable，并且遇到了同样的问题。光标停留在辅助图像上方一英寸处。我认为这是 Jquery 本身的问题，目前还没有解决。我找到了解决此问题的方法，即使用可拖动的“cursorAt”属性。我按如下方式使用它，但可以根据其要求更改它。

$('.dragme').draggable({
helper: 'clone',    
cursor: 'move',    
cursorAt: {left: 50, top: 80}
});

注意： 这适用于所有浏览器，因此使用此代码后，请在所有浏览器中检查您的页面以获得正确的左侧和顶部位置。

Answer 11

我不完全确定这在每种情况下都有效，但这个解决方法我只是在我必须测试的所有各种情况下为我工作（以及此处和其他地方给出的先前提出的解决方案都失败的地方）

(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 年前的错误最终能得到纠正那就太酷了:/)

Answer 12

在改编了我所读到的有关该问题的所有内容之后，这对我有用。

$(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是具有overflow:auto的父级或祖先；

计算出滚动元素的位置，并在每次移动/拖动时添加到辅助元素的位置。

希望对某人有所帮助，因为我在这方面浪费了很多时间。

Answer 13

这似乎可以解决问题，而无需在父级中使用position:absolute:)

$("body").draggable({
     drag: function(event, ui) { 
         return false; 
     } 
});

Answer 14

我设法通过添加 display: inline-block 解决了同样的问题
向拖动的项目

添加 position:relative 对我来说不起作用（jQuery 在拖动开始时用 position:absolute 覆盖它）

使用的 jQuery 版本：

• jQuery - 1.7.2
• jQuery UI - 1.11.4

Answer 15

我遇到了同样的问题，发现这一切都是因为引导导航栏“navbar-fixed-top”类的位置固定，它使我的 比 低 60px 顶部。因此，当我在网站中移动可拖动表单时，光标出现在表单顶部 60 像素处。

你可以看到，在Chrome调试工具中，在Elements界面中，点击标签，你会看到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);

现在，当我使用引导导航栏初始化站点中的可拖动元素/表单时：

// Make the edit forms draggable
$("#org_account_pop").draggable({handle:" .drag_handle", yOffset: 60});

当然，您必须根据自己的站点进行试验以确定正确的 yOffset。

不管怎样，感谢 DarthJDG 为我指明了正确的方向。干杯!

Answer 16

我在顶部使用了粘性导航，并认为这就是导致其他人似乎都遇到的滚动问题的原因。我用cursorAt尝试了其他人的想法，我尝试了遏制，除了在CSS中取消设置我的html溢出之外没有任何效果！太疯狂了，一点 CSS 就会把一切搞砸。这就是我所做的，它就像一个魅力：

html {
  overflow-x: unset;
}

body {
  overflow-x: hidden;
}

Answer 17

我放弃使用 jQueryUi Draggable 并转而使用一个更好的插件，名为 jquery.even.drag，它小得多代码大小，没有 jQueryUI 的那些废话。

我在容器内使用此插件制作了一个演示页面，该容器具有位置：固定

演示

希望这对某人有帮助，因为这个问题很大。

Answer 18

我遇到了类似的问题，仅适用于在 Windows 8 上运行的特定 IE 10。所有其他浏览器都工作正常。删除cursorAt: { top: 0 } 解决了问题。

Answer 19

我在这里尝试了各种答案，包括更新 jQuery，发现这对我有用。我在最新的 chrome 和 IE 上测试了这个。我想这将是一个不同的解决方案的问题，具体取决于您的 UI 布局。

$('{selector}').draggable({
    start: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    },
    drag: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    }
});

Answer 20

为什么不获取光标位置呢？我正在使用可排序插件，并使用以下代码修复它：

sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}

Answer 21

使用 appendTo: "body' 并使用 cursorAt 设置位置。
这对我来说效果很好。

$('.js-tire').draggable
      tolerance: 'fit',
      appendTo: 'body',
      cursor: 'move',
      cursorAt:
        top: 15,
        left: 18
      helper: (event) ->
        $('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
      start: (event, ui) ->
        if $(event.target).hasClass 'in-use'
          $('.js-send-to-maintenance-box').addClass 'is-highlighted'
        else
          $('.ui-droppable').addClass 'is-highlighted'
      stop: (event, ui) ->
        $('.ui-droppable')
          .removeClass 'is-highlighted'
          .removeClass 'is-dragover'