1

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

3

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.