javascript - div - html5 input title

¿Hacer que los elementos arrastrables de HTML5 desplacen la página?

Question

Estoy usando el atributo HTML5 draggable = "true" en algunos de mis divs en mi página web. Lo quiero para que cuando arrastre uno de estos elementos a la parte inferior de la página, desplace la página hacia abajo y cuando lo arrastre hacia la parte superior, desplace la página hacia arriba.

Eventualmente haré una lista de reproducción en mi barra lateral, y dado que no siempre estará a la vista, dependiendo de dónde esté mirando en la página, la página debe desplazarse cuando arrastre.

Mi página está here y puedes intentar arrastrar las imágenes de las publicaciones. En Chrome, automáticamente me permite desplazarme hacia abajo cuando arrastro hacia abajo, pero no hacia arriba. En Firefox, no me permite desplazarme automáticamente en ninguna dirección. ¿Alguna ayuda?

Aquí hay un simple jsfiddle para comenzar. En Chrome deberías poder arrastrar el ícono de Google hacia abajo y hacer que se desplace hacia abajo en la página, pero sin subir.

Answer 1

Aquí hay un código que se desplazará hacia arriba o hacia abajo en su página mientras arrastra algo. Simplemente coloque su objeto de arrastre en la parte superior o inferior de la página. :)

    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

He hecho una simple clase de arrastrar y soltar JavaScript. Se puede desplazar automáticamente hacia arriba o hacia abajo de la página mientras se arrastra. Ver este jsfiddle . También disponible en mi página de github . Arrastrar a alta velocidad no se recomienda ahora. Necesito resolver eso.

El código de abajo es una parte de la biblioteca.

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

Si desea utilizar la herramienta arrastrable, debe saber que ahora es una función HTML 5, es jQuery, así que visite http://jqueryui.com/draggable/ ..

Utilizado como este

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

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