jQuery UI 可拖动位置受 scrollTop 影响？ （包括 JSFiddle）

Posted 2023-05-08

【中文标题】jQuery UI 可拖动位置受 scrollTop 影响？ （包括 JSFiddle）

【英文标题】：jQuery UI draggable position being affected by scrollTop? (JSFiddle Included)

【发布时间】：2011-09-01 17:43:21

【问题描述】：

http://jsfiddle.net/mgJf2/2/

在包含 jQueryUI 之后，唯一的 javascript 是：

$("#scrollbox").draggable(
    axis: 'y',
    drag: function(event, ui) 
         $(document).scrollTop(ui.position.top);
    ,
);

文档滚动对可拖动的 div 具有复合效果（我认为它具有固定位置）。它会导致卷轴跑掉。取出文档滚动，它工作正常，只是没有我想要的页面滚动。

有什么想法吗？

谢谢！

【参考方案1】：

这是错误报告，尚未修复：http://bugs.jqueryui.com/ticket/5009

jQuery UI 中还有一个已知的 bug，到目前为止还没有官方修复，修复计划到 1.9 版。有几种方法可以解决它，从简单到丑陋的 hack，在这里查看我的回复：jQuery draggable shows helper in wrong place after page scrolled

【讨论】：

是否还有其他框架可以很好地完成此功能？

【参考方案2】：

我发现使用拖动功能（触发onmousemove）可以偏移助手的位置。您必须在发布的示例中定位助手 - 我想您只需将 ui.item 替换为 ui.helper。

drag: function(event, ui)  
    var offset = $(this).offset();
    var yPos = offset.top; 
    ui.helper.css('margin-top', $(window).scrollTop() + 'px');

这应该会修复文档在 Chrome 和 Safari 中滚动时的位置。 Mozilla 是唯一一个在没有此修复的情况下正常工作的浏览器。没有在 IE 上测试过。

干杯

【参考方案3】：

保持简单。这是我的解决方案，效果很好。

drag: function(event, ui)  
    ui.helper.css('margin-top', -(t-c.scrollTop()));
,
start: function( event, ui ) 
    t = c.scrollTop();
,