使HTML5可拖动项目滚动页面？ [英] Make HTML5 draggable items scroll the page?

问题描述

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

我最终会在我的侧边栏上制作一个播放列表，并且由于它不会始终显示，具体取决于您在页面上查看的位置，因此当您拖动时，页面需要滚动。

我的页面此处，您可以尝试拖动帖子的图片周围。在Chrome上，当我拖动到底部时，它会自动让我向下滚动，但不会弹起。在Firefox上，它不会自动让我滚动任何方向。任何帮助？

以下是一个简单的 jsfiddle 获取你开始了。在Chrome浏览器中，您应该可以拖动Google图标并将其向下滚动页面，但不会向上滚动。 解决方案

这是一个代码，可以在拖动某些内容时向上滚动或向下滚动页面。只需将拖动对象放在页面的顶部或底部即可。 ：）

  var stop = true; （e）{
 
 stop = true; 
 
 if（e.originalEvent.clientY < 150）{
 stop = false; 
 scroll（-1）
} 
 
 if（e.originalEvent.clientY>（$（window））。 （）-150））{
 stop = false; 
 scroll（1）
} 
 
}）; （dragend，function（e）{
 stop = true; 
}）; 
 
 $（。draggable 
 
 var scroll = function（step）{
 var scrollY = $（window）.scrollTop（）; 
 $（window）.scrollTop（scrollY + step）; 
 if（！stop）{
 setTimeout（function（）{scroll（step）}，20）; 
} 
} 
  

I'm using the HTML5 attribute draggable = "true" on some of my divs on my webpage. I want it so that when you drag one of these items to the bottom of the page, it scrolls the page down and when you drag it to the top, it scrolls the page up.

I will eventually make a playlist on my sidebar, and since it will not always be on view depending on where you're looking on the page, the page needs to scroll when you're dragging.

My page is here and you can try dragging the pictures of the posts around. On Chrome, it automatically lets me scroll down when I drag to the bottom, but not up. On Firefox, it doesn't automatically let me scroll either direction. Any help?

Here's a simple jsfiddle to get you started. On Chrome you should be able to drag the Google icon down and have it scroll the page down, but not going up.

解决方案

here is a code that will scroll-up or scroll-down your page while you are dragging something. Just placing your dragging object at top or bottom of the page. :)

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

这篇关于使HTML5可拖动项目滚动页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！