Question

我有这样的div：

enter image description here

树视图控件（ASTreeView）实现了节点的拖放。

我想要实现的是在将节点拖向div的边缘时自动滚动div，但我不确定应该如何解决这个问题。

需要注意的一件事是它必须在IE8上工作，兼容模式启用了IE7标准模式。

目前，当拖放时，用户可以使用鼠标滚轮或键盘箭头向上和向下滚动div，但它不够好，因为那时我们必须指示用户如何使用滚轮或箭头。

页面使用一些ASP.NET标记进行编码，但包含TreeNode的实际面板呈现为div，如下所示：

<div id="MainContent_panel" style="border-bottom: 1px solid; border-left: 1px solid; 
width: 100%; height: 100px; overflow: auto; border-top: 1px solid; border-right: 1px solid;">

提前致谢。

Answer 1

内置了一个名为OnNodeDragAndDropStartScript的处理程序。您可以将其设置为这样的函数：

function nodeDragging(sender, args)
{
    var container = sender.get_element();
    var divYCoord = $tree.getLocation(container).y;

    var currentYCoord = args.get_domEvent().clientY;
    var textbox = $get("textbox");

    if (currentYCoord > (document.body.clientHeight - 20))
        window.scrollBy(0, 20);

    window.status = "document.body.clientHeight:" + document.body.clientHeight + ":currentYCoord:" + currentYCoord + ":document.body.scrollTop:" + document.body.scrollTop + ":iTop:" + (currentYCoord - document.body.scrollTop) + ":" + args.get_domEvent().screenY + ":" + divYCoord;
    if(currentYCoord < 20)
        window.scrollBy(0, -20);
}

有关详细信息：http://www.astreeview.com/astreeviewdemo/ASTreeViewDemo17.aspx

Answer 2

从@gaynorvader和位于here的答案中获取灵感，我提出了以下解决方案：

enter image description here

使用这样的HTML （在下面的代码中，ASP.NET面板和树视图标记在浏览器中呈现为真实的HTML元素）：

<div id="container" style="border:1px solid;">
    <div id="top" style="background-color:red;height:20px;opacity:0.4;filter:alpha(opacity=40);"></div>
    <asp:Panel ID="panel" 
        Style="overflow:auto;" 
        runat="server"
        Width="100%" Height="100px">
        <cc1:ASTreeView ID="treeView1" 
                OnNodeDragAndDropStartScript="startDrag()"
                OnNodeDragAndDropCompletedScript="completedDragHandler()" ... />
    </asp:Panel>
    <div id="bottom" style="background-color:red;height:20px;opacity:0.4;filter:alpha(opacity=40);"></div>
</div>

我在这里所做的是在面板的顶部和底部边缘创建了两个div元素，其中包含TreeView（所有三个元素都包含在'container'div中）。两个div元素的意图是当鼠标光标在拖放时进入它们时它们可以启动滚动。

然后，在TreeView的HTML中，我将两个JavaScript函数与TreeView的拖动开始事件（OnNodeDragAndDropStartScript）相关联，并且拖动已完成的事件(OnNodeDragAndDropCompletedScript）：

    function startDrag() 
    {
        $("#top").hover(function () {
            $("#MainContent_panel").animate({ scrollTop: 0 }, "slow");
        });

        $("#bottom").hover(function () {
            $("#MainContent_panel").animate({ scrollTop: $(window).scrollTop() + $(window).height() }, "slow");
        });
    } 

    function completedDragHandler() 
    {
        $("#top").off();
        $("#bottom").off();
    }

在drag start事件处理函数（startDrag）中，我使用JQuery将事件处理函数添加到'Hover'事件中。只要鼠标光标进入div元素，就会调用此函数。

要启动滚动，在包含TreeView的面板上调用JQuery animate API，并使用参数告诉它慢慢向上滚动。

在JQuery中，没有任何论据可以向下滚动，因此从答案here中获取灵感，我能够实现向下滚动。

此外，我使用JQuery off()函数在拖动事件完成后删除事件处理程序（OnNodeDragAndDropCompletedScript）。

当鼠标光标到达顶部或底部边缘时滚动div

2 个答案: