使用jQuery UI Draggable,如何在使用滚动条时避免拖动? [英] Using jQuery UI Draggable, how to avoid drag when using scrollbar?
问题描述
很久以前我在我的应用程序中创建了一个对话框。对话框非常简单,位置绝对,通过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();
有一个问题,我的一些对话框有滚动条。
但是使用可拖动的方法,如果有滚动条,则会因为拖动对话框而导致错误。
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/
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,如何在使用滚动条时避免拖动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!