实现自动滚动后的奇怪可拖动行为答案

【问题标题】：Odd Draggable Behavior After Implementing Auto Scroll实现自动滚动后的奇怪可拖动行为
【发布时间】：2013-01-13 04:28:12
【问题描述】：

我已经使用jQuery UI draggable widget 实现了拖放。

我现在在拖动操作期间实现自动滚动。我进行了设置，以便当您开始拖动时，灰色叠加层会出现在浏览器窗口的顶部和底部。当您拖入其中一个叠加层时，浏览器窗口开始自动滚动。

您可以在http://www.softcircuits.com/Client/scrolltest.html 看到我的测试页面。通过拖动左侧的一个十字准线图标来拖动项目。

但是有一个问题：如果滚动到页面底部，然后将一个项目拖到顶部叠加层，它会按预期向上滚动。然而，对我来说，我在页面的一半左右，可拖动的助手不会再高了。我无法一直拖到页面顶部。

这很可能与 Draggable 小部件有关。有谁能够看到为什么会这样？我在 Windows 7 上使用 Google Chrome。

【问题讨论】：

我正在使用 Chrome (22)，它似乎对我有用。当我将拖动的项目保持在顶部灰色区域时，它会向上滚动整个页面。然后，我当然必须向下移动鼠标（仍在拖动）以将其放入表格中。但是有效...
@Peter：谢谢。看起来我的版本是 24.0.1312.52 m。刚刚又试了一次，这次我什至没有向上滚动一整页，拖动的项目就不会再向上了。在该点移动鼠标的任何量都不会使项目更高。你是从页面底部一直拖到顶部的吗？
奇数。我拿了最底部的项目，并将光标放在顶部的灰色区域。我可以一直向上滚动，但我失去了我正在拖动的项目......
为什么这么奇怪？这不正是我要描述的问题吗？
FWIW，我拿了你的代码并升级到最新的 jQuery 和 jQuery-UI，它仍然有问题。

标签： javascript jquery jquery-ui jquery-ui-draggable

【解决方案1】：

为了跨浏览器兼容并避免奇怪的行为，我建议使用所有JQueryUI draggable callbacks。

几天前我读到最后一个版本的 Chrome 在原生 HTML5 可拖动事件方面存在一些非常棘手的问题。

例如，我刚刚检查了您的网页源代码，您正在使用$('.drag-handle').on('drag', function(){...}); => 您应该使用drag 回调。

我还建议不要在您的情况下使用 window 作为可滚动容器。您应该创建一个div 来包装所有表格内容并将其用作滚动容器。我过去已经完成了这个实现，它正在工作。

在创建可拖动小部件期间，不要忘记在 containment 选项中设置包装器 ID。

如果它总是不起作用，您也可以尝试覆盖 drag 回调中的辅助位置：

//Save the mouse position in global variables
$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
});

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Force the helper position
            ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
            ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
        });
});

【讨论】：

谢谢，我会处理这个。但是，我不相信创建一个可滚动的 div 是可以接受的。当我认为页面应该有自然滚动时，这会使正常滚动有点不自然。此外，当我查看 jQuery Draggable 页面上的可滚动演示时，我也发现了一些古怪的行为。在我看来，这仍然是 Draggable 小部件的问题。
另外，我不确定使用回调会有什么不同。我看到了与您对我的其他问题的回答以及您如何检查鼠标位置相关的代码。但我对此采取了不同的方法。并且拖动似乎工作得很好。（除非我遗漏了什么。）
当您弄清楚这一点时，我会很高兴检查您的解决方案。保持联系。

【解决方案2】：

将可拖动的包含选项从窗口更改为文档对我有用。

$('.drag-handle').draggable({ 
    ...
    containment: "document",
    ...
});

见：http://docs.jquery.com/UI/Draggable#option-containment

【讨论】：