Scroll inside the Doppable DIV, and drag near the bottom

Question

I have several draggable divs inside a scrollable div. When I drag them into the drop-down area (which is also a scrollable div), the doppable DIV does not scroll down. Just the page is moving. How to say that only the draggable div should scroll while dragging?

Here is my current jquery code for creating draggable divs

$(".drag_item").draggable({ helper: 'clone', scroll: true, drag: function( event, ui ) { $(this).css('z-index','100'); } }); 

Answer 1

I came up with this solution:

 var direction = {}; var bound = {}; var scrolling = false; var container = document.getElementById("container"); $('#table-container') .on('dragstart', draggable, function(event, ui) { bound = { right : $(container).offset().left + $(container).width() - 50, left : $(container).offset().left + 50, top : $(container).offset().top + 50, bottom : $(container).offset().top + $(container).height() - 50 }; }) .on('dragstop', draggable, function(event, ui) { direction = {}; }) .on('drag', draggable, function(event, ui) { direction.right = event.clientX - bound.right; direction.left = bound.left - event.clientX; direction.up = bound.top - event.clientY; direction.down = event.clientY - bound.bottom; if ((direction.right > 0 || direction.left > 0|| direction.up > 0 || direction.down > 0) && !scrolling) { scroll(); scrolling = true; } else { scrolling = false; } }); function scroll() { if (direction.right > 0) { container.scrollLeft = container.scrollLeft + (direction.right >> 1); //dividing by 2 to soften effect } if (direction.left > 0) { container.scrollLeft = container.scrollLeft - (direction.left >> 1); } if (direction.down > 0) { container.scrollTop = container.scrollTop + (direction.down >> 1); } if (direction.up > 0) { container.scrollTop = container.scrollTop - (direction.up >> 1); } if (direction.right > 0 || direction.left > 0 || direction.up > 0 || direction.down > 0) { setTimeout(scroll, 100); } } 

Answer 2

Use " overflow=auto ", it works for me.

 <div style="overflow:auto;"></div> 

OR

jQuery now supports scrollTop as an animation variable.

 $("#id").animate({"scrollTop": $("#id").scrollTop() + 100}); 

You no longer need setTimeout / setInterval to scroll smoothly.