实现自动滚动后奇怪的可拖动行为
我使用jQuery UI可拖动小部件实现了拖放。
我现在正在拖动操作期间实现自动滚动。 我进行了设置，以便在您开始拖动时，灰色叠加层会出现在浏览器窗口的顶部和底部。 当您拖入其中一个叠加层时，浏览器窗口将开始自动滚动。
您可以在http://www.softcircuits.com/Client/scrolltest.html上查看我的测试页面。 通过拖动左侧的一个十字准线图标来拖动项目。
但是有一个问题：如果您滚动到页面底部，然后将项目拖到顶部叠加层，它将按预期向上滚动。 然而，对我来说，我大约在页面的一半，而可拖动的助手不会更高。 我无法一直拖到页面顶部。
这很可能与Draggable小部件有关。 有人能够看出为什么会这样吗？ 我在Windows 7上使用谷歌浏览器。
将可拖动的包含选项从窗口更改为文档为我工作。
$('.drag-handle').draggable({ ... containment: "document", ... }); 请参阅： http ： //docs.jquery.com/UI/Draggable#option-containment
为了跨浏览器兼容并避免出现错误行为，我建议使用所有JQueryUI可拖动回调 。
我几天前读过，Chrome的最后一个版本对本机HTML5可拖动事件有一些非常棘手的问题。
例如，我刚刚检查了您的网页源代码，您正在使用$('.drag-handle').on('drag', function(){...}); =>您应该使用拖动回调。
我还建议不要在您的情况下使用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; }); });