I have a draggable <div> with overflow set to auto to show a scrollbar when the content is too wide.

I want the entire content of the <div> to be draggable, so I have not added a handle. Now when I try to drag the scrollbar, the entire <div> is dragged instead of scrolling the content.

Is there a way of excluding an element from the handle of a draggable <div> in jQuery?

I need something like:

$("#element").draggable({
    handle: "not(#thisTable)"
})

Is there a way of doing this with selectors or something like that?

I have a draggable <div> with overflow set to auto to show a scrollbar when the content is too wide.

I want the entire content of the <div> to be draggable, so I have not added a handle. Now when I try to drag the scrollbar, the entire <div> is dragged instead of scrolling the content.

Is there a way of excluding an element from the handle of a draggable <div> in jQuery?

I need something like:

$("#element").draggable({
    handle: "not(#thisTable)"
})

Is there a way of doing this with selectors or something like that?

• javascript
• jquery
• jquery-ui
• drag-and-drop
• draggable

2 Answers 2

tnx for your answer, but i found what i think is a better solution....

there is another option for draggable called 'cancel' and it excludes the selected element from the handle of the draggable element...

$('#container').draggable('option', 'cancel', '#excludedElement');

hope this helps someone else...

Add a div inside your div, width & height 100%, no margin, no padding, and put your content there. Set its overflow to default and set it as the handle. That way, the scrollbar of the parent div will no longer be in the handle, thus not initiating the drag.