web-dev-qa-db-ja.com

HTML5のドラッグ可能なアイテムでページをスクロールさせますか？

Webページの一部のdivでHTML5属性draggable = "true"を使用しています。これらのアイテムの1つをページの下部にドラッグするとページが下にスクロールされ、上部にドラッグするとページが上にスクロールされるようにしたいのです。

最終的にはサイドバーに再生リストを作成します。ページのどこを見ているかによって、常に表示されるとは限らないため、ドラッグしているときにページをスクロールする必要があります。

私のページは here です。投稿の写真をドラッグしてみてください。 Chromeでは、下にドラッグすると自動的に下にスクロールしますが、上にスクロールすることはできません。 Firefoxでは、どちらの方向にもスクロールできません。何か助けは？

以下は、簡単な jsfiddle です。 Chromeでは、Googleアイコンを下にドラッグしてページを下にスクロールできるが、上に移動できないはずです。

javascripthtmldraggable
20
jas7457

これは、何かをドラッグしている間、ページをスクロールアップまたはスクロールダウンするコードです。ドラッグするオブジェクトをページの上部または下部に配置するだけです。 :)

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

簡単な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);
    }
  }
};
0
Joshy Francis