CODEWITHSUNDEEP
javascriptjquerycssjquery-uidrag-and-drop
Chris
Chris

Reputation: 6246

How to make a scrollable element draggable?

I am having problems trying to make some of my scrollable elements draggable.

I'm using jquery ui, but basically I need the scrollbar to not interfere with the drag events.

See this js fiddle for an example: http://jsfiddle.net/eCbSp/

In firefox dragging down on the scrollbar causes the box to move, in chrome / ie the cursor becomes stuck to the box after trying to scroll with the mouse.

Does anyone know if what I'm trying to do is possible?

Thanks

Upvotes: 1

Views: 4057

Answers (1)

afreeland
afreeland

Reputation: 3979

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...worked fine is jsfiddle but didnt try it cross browser, it should work tho =)

<div class="valign_outer container">
    <div class="myhandle" style="width:98%; height:100%;">
    <div class="valign_inner">
        <p>How much content is in here?</p>
        <p>Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>I am going to be bigger than min height!</p>
    </div>
</div>


var dragOpts = {
    handle: '.myhandle'

}
$('.container').draggable(dragOpts );

Here is a sample of it working

Upvotes: 2

Related Questions