Is there an easy way to do click-and-drag scrolling in text frames?

Question

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.
|               | |
|               | |
-------------------

Answer 1

hey,

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.

Answer 2

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.com/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

Answer 3

Here is a nice implemenation of drag and scroll divs

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

http://plugins.jquery.com/project/Dragscrollable