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

Posted 2023-05-08

【中文标题】使用 jQuery UI Draggable，使用滚动条时如何避免拖动？

【英文标题】：Using jQuery UI Draggable, how to avoid drag when using scrollbar?

【发布时间】：2012-02-06 06:31:51

【问题描述】：

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

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

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

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

有没有办法让对话框在使用滚动条时不拖动？ 我注意到有一些方法可以避免元素被拖动，但滚动条不是元素。

谢谢

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

【问题讨论】：

你能不能把这种行为搞得一团糟？

【参考方案1】：

作为一种解决方法，您可以尝试使用handle option，并且只使对话框可以被不可滚动的部分拖动。 （标题之类的。）

jsFiddle Example

@AlexFigueiredo 指出的另一个解决方案只涉及处理大小调整和滚动的wrapping the content / handle in a div——这似乎阻止了点击事件被发送到句柄。

【讨论】：

@AlexFigueiredo 这是不需要标题栏的好方法。即使您将其简化为：jsfiddle.net/FGXnR/1

似乎也有效