I have a div with overflow:auto and a scroll bar, and I'd like to be able to drag the contents to scroll. I don't need to be able to select text. Is there an easy way to do this? A jQuery plugin would be good, otherwise plain old JavaScript would be fine.

It seems I haven't made myself clear enough. There's a div with a fixed height that I want to scroll. Instead of picking up the scroll bar, I want to click and drag inside the text in the opposite direction. Like on an iPhone. Like in Photoshop when you hold down space and drag.

-------------------
|               | |
|               | |
|               
|               | |
|         <----------- click here and drag to scroll.
|               | |
|               | |
-------------------

I have a div with overflow:auto and a scroll bar, and I'd like to be able to drag the contents to scroll. I don't need to be able to select text. Is there an easy way to do this? A jQuery plugin would be good, otherwise plain old JavaScript would be fine.

It seems I haven't made myself clear enough. There's a div with a fixed height that I want to scroll. Instead of picking up the scroll bar, I want to click and drag inside the text in the opposite direction. Like on an iPhone. Like in Photoshop when you hold down space and drag.

-------------------
|               | |
|               | |
|               
|               | |
|         <----------- click here and drag to scroll.
|               | |
|               | |
-------------------

• javascript
• drag-and-drop
• scroll

• 3 +1 for the nice representation – Anas Nakawa Commented Jan 9, 2013 at 8:06

3 Answers 3

Here is a nice implemenation of drag and scroll divs https://github./mvlandys/jquery.dragscrollable

below is my original link that I posted. Looks like someone edited my answer.

http://hitconsultants./dragscroll_scrollsync/scrollpane.html

Do you mean that content should be scrolling when you move the scrollbar?

Make new div for the content you want to be dragable, and put it on the div you are scrolling. check the code given.

<div style="position:relative; overflow:hidden;">
    <div id="dragableContent"
    style="float: left;display: none;background:none repeat scroll 0 0 white; border:1px solid #323C45; border-width:0px 1px 0px 1px;"></div>
    <div> This is you content div...</div>
</div>

then on page load, you can make the div visible after setting its content HTML.

$(document).ready(function() {
    stripColumnFromDiv('Your content Div ID');
    var scrollingDiv = $("#dragableContent");
    scrollingDiv.css({'position':'absolute','display':'block'});
});

where stripColumnFromDiv function is setting the data from your element to new empty dragableContent.

I hope this is what you want,and helps you.

thanks.

There is plugin in Jquery UI called draggable through this you can change any element into draggable object

Here is the link for the demo http://jqueryui./demos/draggable/

It is as simple as this

<script type="text/javascript">
$(function() {
    $("#draggable").draggable();
});
</script>

It is also possible to make it scrollable inside a div. Check the demo page