使 HTML5 可拖動項目滾動頁面？

Question

我在我網頁上的一些 div 上使用 HTML5 屬性draggable = "true" 。 我想要它，以便當您將這些項目之一拖到頁面底部時，它會向下滾動頁面，當您將它拖到頂部時，它會向上滾動頁面。

我最終會在我的側邊欄上制作一個播放列表，並且由於它不會始終顯示在頁面上，具體取決於您在頁面上查看的位置，因此頁面需要在您拖動時滾動。

我的頁面在這里，您可以嘗試拖動帖子的圖片。 在 Chrome 上，當我拖到底部時它會自動讓我向下滾動，但不會向上滾動。 在 Firefox 上，它不會自動讓我向任一方向滾動。 有什么幫助嗎？

這是一個簡單的jsfiddle ，可以幫助您入門。 在 Chrome 上，您應該能夠向下拖動 Google 圖標並讓它向下滾動頁面，但不能向上滾動。

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

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

Answer 3

這是AngularPlayers答案的 javascript 版本，我添加了橫向支持。 我注意到 JQuery 解決方案和 Javascript 解決方案在移動 safari 上都有一個錯誤，當過度滾動的反彈效果發生時，它允許頁面無限增長。

VerticalMaxed和HorizontalMaxed ​​ntalMaxed 的目的是在再次滾動之前檢查滾動條是否未達到最大值。 這可以防止頁面在過度滾動反彈期間增長。

var stopX = true;
var stopY = true;

document.addEventListener('drag', function(e) {
    if (event.target.classList.contains('draggable')) {
        stopY = true;
                    
        // Handle Y
        if (e.clientY < 150) {
            stopY = false;
            scroll(0,-1)
        }

        if ((e.clientY > ( document.documentElement.clientHeight - 150)) && !VerticalMaxed()) { 
            stopY = false;
            scroll(0,1) 
        }
                
        // Handle X
        stopX = true;
        if (e.clientX < 150) {
            stopX = false;
            scroll(-1,0)
        }

        if ((e.clientX > ( document.documentElement.clientWidth - 150)) && !HorizontalMaxed()) { 
            stopX = false;
            scroll(1,0)
        }
    }

});

document.addEventListener('dragend', function(e) {
    if (event.target.classList.contains('draggable')) {
        stopY = true;
        //stopY = true;
        stopX = true;
    }
});

// On drag scroll, prevents page from growing with mobile safari rubber-band effect
var VerticalMaxed = function(){ return (window.innerHeight + window.scrollY) >= document.body.offsetHeight}
var HorizontalMaxed = function(){ return (window.pageXOffset) > (document.body.scrollWidth - document.body.clientWidth);}

var scroll = function (stepX, stepY) {
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    window.scrollTo((scrollX + stepX), (scrollY + stepY));
                
    if (!stopY || !stopX) {
        setTimeout(function () { scroll(stepX, stepY) }, 20);
    }
}

Answer 4

如果你想使用 dragable 你應該知道它現在是 HTML 5 特性，它的 jQuery，所以在這里查看http://jqueryui.com/draggable/ ..

像這樣使用

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

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