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

Question

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

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

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

但存在一个问题：如果您滚动到页面底部，然后将项目拖到顶部覆盖图，它将按预期向上滚动。然而，对我而言，我大概在页面的上半部分，可拖动的助手不会更高。我无法一直拖到页面的顶部。

这很可能似乎与Draggable小部件有关。有人能够看到为什么会发生这种情况吗？我在Windows 7上使用谷歌浏览器。

Answer 1

从窗口更改拖动遏制选项，以文件为我工作。

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

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

Answer 2

为了能够跨浏览器兼容并避免出现异常行为，我建议您使用全部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; 
     }); 
});