4

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

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

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

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

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

4

2 回答 2

3

为了跨浏览器兼容并避免奇怪的行为，我建议使用所有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; 
        });
});
于 2013-01-13T09:24:58.637 回答
1

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

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

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

于 2013-01-21T21:45:02.643 回答