Скроллирует ДИВ, когда курсор мыши достигает верхний или нижний край

Question

У меня есть DIV так:

управление Tree View (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

Вдохновляясь @gaynorvader и ответ, расположенного 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 (со всеми тремя элементами, содержащимися в 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(); 
    } 

В обработчик события начала перетаскивания function (startDrag), я использовал JQuery для добавления функции обработчика событий в событие «Hover». Эта функция вызывается всякий раз, когда курсор мыши входит в элемент div.

Чтобы инициировать прокрутку, API-панель JQuery animate вызывается на панели, содержащей TreeView, с аргументами, чтобы прокручивать ее вверх медленно.

В JQuery нет аргументов для прокрутки вниз, и поэтому, беря вдохновение из ответа here, я смог реализовать нисходящий свиток.

Кроме того, я использовал функцию JQuery off() для удаления обработчиков событий после завершения события перетаскивания (OnNodeDragAndDropCompletedScript).

Answer 2

Там в обработчик называется 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