Html 使 HTML5 可拖动项目滚动页面？

Make HTML5 draggable items scroll the page?

提问by jas7457

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.

我draggable = "true"在我的网页上的一些 div 上使用 HTML5 属性。我想要这样，当您将这些项目之一拖到页面底部时，它会向下滚动页面，而当您将其拖到顶部时，它会向上滚动页面。

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 hereand 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?

我的页面在这里，您可以尝试拖动帖子的图片。在 Chrome 上，当我拖到底部而不是向上时，它会自动让我向下滚动。在 Firefox 上，它不会自动让我向任一方向滚动。有什么帮助吗？

Here's a simple jsfiddleto 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.

这是一个简单的jsfiddle来帮助您入门。在 Chrome 上，您应该能够向下拖动 Google 图标并让它向下滚动页面，但不能向上滚动。

回答by AngularPlayer

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

回答by Joshy Francis

I have made a simple JavaScript drag and drop class. It can automatically scroll up or down the page while dragging. See this jsfiddle. Also avaliable at my githubpage. Dragging at a high speed is not recommended now. I need to work out that.

我做了一个简单的 JavaScript 拖放类。它可以在拖动的同时自动向上或向下滚动页面。看到这个jsfiddle。也可在我的github页面上找到。现在不建议高速拖动。我需要解决这个问题。

Code below is a part of the library.

下面的代码是库的一部分。

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

回答by Strahinja Djuri?

If you want to use dragable you should know that it is now HTML 5 feature, its jQuery, so check it out here http://jqueryui.com/draggable/..

如果你想使用 dragable 你应该知道它现在是 HTML 5 特性，它的 jQuery，所以在这里查看它http://jqueryui.com/draggable/..

Used like this

像这样使用

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

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

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