Make HTML5 draggable items scroll the page?

here is a code that will scroll-up or scroll-down your page while you are dragging something. Just placing your dragging object at top or bottom of the page. :)

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

I have made a simple JavaScript drag and drop class. It can automatically scroll up or down the page while dragging.See this jsfiddle. Also avaliable at my github page.Dragging at a high speed is not recommended now. I need to work out that.

Code below is a part of the library.

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

If you want to use dragable you should know that it is now HTML 5 feature, its jQuery, so check it out here http://jqueryui.com/draggable/..

Used like this

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

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