it-swarm.com.ru

Сделать HTML5 перетаскиваемые элементы прокрутки страницы?

Я использую атрибут HTML5 draggable = "true" в некоторых моих div-элементах на моей веб-странице. Я хочу, чтобы при перетаскивании одного из этих элементов в нижнюю часть страницы он прокручивал страницу вниз, а при перетаскивании ее вверх - прокручивал страницу вверх.

В конечном итоге я создам плейлист на боковой панели, и поскольку он не всегда будет отображаться в зависимости от того, где вы смотрите на странице, страница должна прокручиваться при перетаскивании.

Моя страница здесь , и вы можете попытаться перетащить фотографии постов вокруг. В Chrome автоматически прокручивается вниз, когда я перетаскиваю вниз, но не вверх. В Firefox он не позволяет автоматически прокручивать ни одно из направлений. Любая помощь?

Вот простой jsfiddle , чтобы вы начали. В Chrome вы сможете перетащить значок Google вниз и прокрутить страницу вниз, но не вверх.

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

Я сделал простой JavaScript-класс перетаскивания. Он может автоматически прокручивать страницу вверх или вниз при перетаскивании . Смотрите это jsfiddle . Также доступно на моей github page . Перетаскивание на высокой скорости сейчас не рекомендуется. Мне нужно решить это.

Код ниже является частью библиотеки.

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