Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make HTML5 draggable items scroll the page?

Tags:

I'm using the HTML5 attribute draggable = "true" on some of my divs on my webpage. I want it so that when you drag one of these items to the bottom of the page, it scrolls the page down and when you drag it to the top, it scrolls the page up.

I will eventually make a playlist on my sidebar, and since it will not always be on view depending on where you're looking on the page, the page needs to scroll when you're dragging.

My page is here and you can try dragging the pictures of the posts around. On Chrome, it automatically lets me scroll down when I drag to the bottom, but not up. On Firefox, it doesn't automatically let me scroll either direction. Any help?

Here's a simple jsfiddle to get you started. On Chrome you should be able to drag the Google icon down and have it scroll the page down, but not going up.

like image 339
jas7457 Avatar asked Sep 15 '13 06:09

jas7457


People also ask

How do I make a scrollable div draggable?

What I did was place a div inside of your scroll div and set its width to 98% of its parents width. I created it so it could be used as a handle, which means that when a user clicks that element it will actually move your draggable. Hope this works...

How do I make elements draggable in HTML?

To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page.

How do I drag data in HTML5?

Drag and Drop Process If you want to drag an element, you need to set the draggable attribute to true for that element. Set an event listener for dragstart that stores the data being dragged. The event listener dragstart will set the allowed effects (copy, move, link, or some combination).


2 Answers

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);         }     } 
like image 169
AngularPlayer Avatar answered Sep 28 '22 05:09

AngularPlayer


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);     }   } }; 
like image 38
Joshy Francis Avatar answered Sep 28 '22 03:09

Joshy Francis