Сделать перетаскиваемые элементы HTML5 прокручивать страницу?

Я использую атрибут HTML5 draggable = "true" на некоторых моих div на моей веб-странице. Я хочу, чтобы при перетаскивании одного из этих элементов в нижнюю часть страницы он прокручивает страницу вниз, а когда вы перетаскиваете ее вверх, она прокручивает страницу вверх.

В конечном итоге я создам плейлист на боковой панели, и поскольку он не всегда будет отображаться в зависимости от того, где вы смотрите на странице, страница должна прокручиваться при перетаскивании.

Моя страница здесь, и вы можете попробовать перетащить фотографии сообщений вокруг. В Chrome он автоматически позволяет прокручивать вниз, когда я перетаскиваю его в нижнюю часть, но не вверх. В Firefox он автоматически не позволяет мне прокручивать в любом направлении. Любая помощь?

Вот вам простой jsfiddle, чтобы вы начали. В Chrome вы сможете перетащить значок Google вниз и прокрутить страницу вниз, но не подниматься.

Ответ 1

Вот код, который будет прокручивать или прокручивать страницу, пока вы что-то перетаскиваете. Просто поместите объект перетаскивания вверху или внизу страницы.:)

    var stop = true;
    $(".draggable").on("drag", function (e) {

        stop = true;

        if (e.originalEvent.clientY < 150) {
            stop = false;
            scroll(-1)
        }

        if (e.originalEvent.clientY > ($(window).height() - 150)) {
            stop = false;
            scroll(1)
        }

    });

    $(".draggable").on("dragend", function (e) {
         stop = true;
    });

    var scroll = function (step) {
        var scrollY = $(window).scrollTop();
        $(window).scrollTop(scrollY + step);
        if (!stop) {
            setTimeout(function () { scroll(step) }, 20);
        }
    }

Ответ 2

Я создал простой класс перетаскивания JavaScript. Он может автоматически прокручивать страницу вверх или вниз во время перетаскивания. Смотрите jsfiddle. Также доступна на странице github. Перетаскивание с высокой скоростью не рекомендуется сейчас. Мне нужно это выяснить.

Код ниже является частью библиотеки.

var autoscroll = function (offset, poffset, parentNode) {
             var xb = 0;
            var yb = 0;
            if (poffset.isBody == true) {
                var scrollLeft = poffset.scrollLeft;
                var scrollTop = poffset.scrollTop;
                var scrollbarwidth = (document.documentElement.clientWidth - document.body.offsetWidth); //All
                var scrollspeed = (offset.right + xb) - (poffset.right + scrollbarwidth);
                if (scrollspeed > 0) {
                    this.scrollLeft(parentNode, scrollLeft + scrollspeed);
                }
                scrollspeed = offset.left - (xb);
                if (scrollspeed < 0) {
                    this.scrollLeft(parentNode, scrollLeft + scrollspeed);
                }
                scrollspeed = (offset.bottom + yb) - (poffset.bottom);
                if (scrollspeed > 0) {
                    this.scrollTop(parentNode, scrollTop + scrollspeed);
                }
                scrollspeed = offset.top - (yb);
                if (scrollspeed < 0) {
                    this.scrollTop(parentNode, scrollTop + scrollspeed);
                }
            } else {
                var scrollLeft = offset.scrollLeft;
                var scrollTop = offset.scrollTop;
                var scrollbarwidth = parentNode.offsetWidth - parentNode.clientWidth; //17
                var scrollbarheight = parentNode.offsetHeight - parentNode.clientHeight; //17
                var scrollspeed = (offset.right + xb) - (poffset.right - scrollbarwidth);
                if (scrollspeed > 0) {
                    this.scrollLeft(parentNode, scrollLeft + scrollspeed);
                }
                scrollspeed = offset.left - (xb + poffset.left);
                if (scrollspeed < 0) {
                    this.scrollLeft(parentNode, scrollLeft + scrollspeed);
                }
                scrollspeed = (offset.bottom + scrollbarheight + yb) - (poffset.bottom);
                if (scrollspeed > 0) {
                    this.scrollTop(parentNode, scrollTop + scrollspeed);
                }
                scrollspeed = offset.top - (yb + poffset.top);
                if (scrollspeed < 0) {
                    this.scrollTop(parentNode, scrollTop + scrollspeed);
                }
            }
        };

Ответ 3

Если вы хотите использовать dragable, вы должны знать, что теперь это функция HTML 5, ее jQuery, поэтому проверьте здесь http://jqueryui.com/draggable/..

Используется как

$( "#draggable" ).draggable();

http://jsfiddle.net/dFPVr/7/