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

问题描述

很久以前，我在我的应用程序中创建了一个对话框.对话框非常简单，绝对定位，通过 javascript 在屏幕中居中.

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.

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

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();

有一个问题，我的一些对话框有滚动条.
但是使用 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.

谢谢

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

推荐答案

作为一种解决方法，您可以尝试使用 handle 选项 并且只使对话框可以被不可滚动的部分拖动.(标题之类的.)

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

@AlexFigueiredo 指出的另一个解决方案仅涉及 将内容/句柄包装在 div 处理大小调整和滚动——这似乎阻止了点击事件被发送到句柄.

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.

这篇关于使用jQuery UI Draggable，使用滚动条时如何避免拖动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！