26

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

我最终会在我的侧边栏上制作一个播放列表，因为它不会总是根据你在页面上的位置显示，所以当你拖动时页面需要滚动。

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

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

4

3 回答 3

36

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

    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);
        }
    }
于 2015-03-13T17:19:35.090 回答
1

我制作了一个简单的 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);
    }
  }
};
于 2017-10-20T13:03:56.560 回答
-14

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

像这样使用

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

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

于 2013-09-15T06:54:11.793 回答