Using jQuery UI Draggable, how to avoid drag when using scrollbar?

Question

A long time ago I created a dialog box in my application. The dialog is pretty simple, position absolute, centered in the screen via javascript.

Now I have added jQuery UI to the application but I do not want to use jQuery UI's dialogs just because they work differently. But I did make my dialog draggable using jQuery UI as it is very easy:

$('#dialog').draggable();

There is one problem with that, some of my dialogs have scrollbars.
But using the draggable method, if there is a scrollbar, it bugs because it drags the dialog.

Is there a way for the dialog to not drag while using the scrollbar ?
I noticed there are some ways to avoid elements to be dragged, but scrollbars are not elements.

Thank you

EDIT: JSFiddle: http://jsfiddle.net/FGXnR/

Could you make a jsfiddle of this behavior?

hasser
– hasser

2012-01-09 18:26:25 +00:00
Commented Jan 9, 2012 at 18:26 — hasser
– hasser, Commented Jan 9, 2012 at 18:26

millimoose · Accepted Answer · 2012-01-12 01:07:04Z

As a workaround, you could try using the handle option and only make the dialog draggable by the parts that aren't scrollable. (The title or some such.)

jsFiddle Example

Another solution that @AlexFigueiredo pointed out involves just wrapping the content / handle in a div that handles the sizing and scrolling – that seems stop the click event from being sent to the handle.

@AlexFigueiredo That's a great way to do this without the need for a title bar. It seems to work even when you simplify it down to: jsfiddle.net/FGXnR/1

Collectives™ on Stack Overflow

Using jQuery UI Draggable, how to avoid drag when using scrollbar?

1 Answer 1

jsFiddle Example

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related