使HTML5可拖动项滚动页面？

Question

我draggable = "true"在我的网页上的某些div上使用HTML5属性.我想要它,以便当您将其中一个项目拖动到页面底部时,它会向下滚动页面,当您将其拖动到顶部时,它会向上滚动页面.

我最终会在侧边栏上创建一个播放列表,因为根据您在页面上的位置,它不会一直在视图中,当您拖动时页面需要滚动.

我的页面在这里,您可以尝试拖动帖子的图片.在Chrome上,当我拖到底部时,它会自动向下滚动,但不会向上滚动.在Firefox上,它不会自动让我滚动任何方向.有帮助吗？

这是一个简单的jsfiddle,可以帮助您入门.在Chrome上,您应该可以向下拖动谷歌图标,让它向下滚动页面,但不会向上滚动.

Answer 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);
        }
    }