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: /
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/FGXnR/
Share Improve this question edited Jan 9, 2012 at 18:30 Andrei asked Jan 9, 2012 at 18:24 AndreiAndrei 1,0052 gold badges19 silver badges41 bronze badges 1- Could you make a jsfiddle of this behavior? – hasser Commented Jan 9, 2012 at 18:26
1 Answer
Reset to default 13As 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.