Прокрутите div, когда курсор мыши достигнет верхнего или нижнего края

0

У меня такой div:

Изображение 174551

Элемент управления 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;">

Заранее спасибо.

  • 1
    Можете ли вы поднять часть своего кода? Вы используете JQuery UI- sortable ?
  • 0
    Нет, интерфейс Sortable API пользовательского интерфейса JQuery работает только со списками, где я работаю с элементом управления TreeView. Я использую ASTreeView, который имеет собственную реализацию реструктуризации перетаскивания. Я добавлю немного кода (извинения за то, что пренебрегли, чтобы сделать это в первый раз)
Показать ещё 6 комментариев
Теги:
scroll

2 ответа

1
Лучший ответ

Вдохновляя @gaynorvader и ответ, расположенный здесь, я придумал следующее решение, которое выглядит так:

Изображение 174551

с таким 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();
    }

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

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

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

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

Поделиться
1

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню