Question

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

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

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

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

这很可能与Draggable小部件有关。有人能够看出为什么会这样吗？我在Windows 7上使用谷歌浏览器。

Answer 1

为了跨浏览器兼容并避免行为，我建议使用全部JQueryUI draggable callbacks。

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

例如，我刚检查了您的网页源代码，并且您正在使用$('.drag-handle').on('drag', function(){...}); =＆gt;您应该使用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; 
        });
});

Answer 2

将可拖动的包含选项从窗口更改为文档为我工作。

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

请参阅：http://docs.jquery.com/UI/Draggable#option-containment

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

2 个答案: