滾動一個div當鼠標光標到達頂部或底部邊緣

enter image description here

樹視圖控件（ASTreeView）實現拖動和節點的掉落。

我想要實現的是在將div節點拖到div邊緣時自動滾動div，但我不確定該如何去做。

需要注意的一個關鍵是，它必須在啓用了IE7標準模式的兼容模式的IE8上工作。

目前，在拖放時，用戶可以使用鼠標滾輪或鍵盤箭頭向上和向下滾動div，但它不夠好，因爲我們必須指導用戶如何使用滾輪或箭頭。

該頁面使用一些ASP.NET標記編碼，但包含了樹節點的實際面板呈現爲一個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;">

感謝。

來源

2013-11-28 Ciaran Gallagher

你可以提出一些你的代碼？你使用jQuery-UI「可排序」嗎？ – gaynorvader

不，JQuery UI的Sortable API只能用於列表，我正在使用TreeView控件。我正在使用ASTreeView，它有自己的拖放重構實現。我會添加一些代碼（道歉忽略做了第一次）的 –

可能的（類似的）一式兩份：http://stackoverflow.com/questions/6677035/jquery-scroll-to-element你可以建立一個處理程序這樣，當鼠標停下時，它會循環該腳本，使div滾動，以便該元素始終可見。 –

以從@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元素的意圖是當鼠標光標在拖放時進入它們時，它們可以啓動滾動。

然後，在HTML中的TreeView，我相關的兩個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(); 
    }

在拖拽開始的事件處理程序函數（startDrag），我用JQuery爲'Hover'事件添加一個事件處理函數。只要鼠標光標進入div元素，就會調用該函數。

要啓動滾動，將在包含TreeView的面板上調用JQuery animate API，並使用參數告訴它向上滾動緩慢。

在JQuery中，沒有向下滾動的參數，所以從答案here得到靈感，我能夠實現向下滾動。

此外，我使用JQuery off()函數在拖動事件完成時刪除事件處理程序（OnNodeDragAndDropCompletedScript）。

來源

2013-11-28 15:18:16

有一個叫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); 
}

來源

2013-11-28 11:46:52 gaynorvader

滾動一個div當鼠標光標到達頂部或底部邊緣

回答

相關問題