使用jQuery UI Draggable，如何在使用滚动条时避免拖动？

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.

很久以前我在我的应用程序中创建了一个对话框。对话框非常简单,位置绝对,通过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:

现在我已经将jQuery UI添加到应用程序中,但我不想仅仅因为它们的工作方式不同而使用jQuery UI的对话框。但我确实使用jQuery UI使我的对话框可以拖动,因为它非常简单:

$('#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.

有一个问题,我的一些对话框有滚动条。但是使用draggable方法,如果有滚动条,它就会出错,因为它会拖动对话框。

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/

编辑:JSFiddle:http://jsfiddle.net/FGXnR/

1 个解决方案

#1

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.)

作为一种变通方法,您可以尝试使用handle选项,并且只能通过不可滚动的部分使对话框可拖动。 (标题或其他一些。)

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指出的另一个解决方案涉及将内容/句柄包装在处理大小调整和滚动的div中 - 这似乎阻止了将click事件发送到句柄。