javascript - 在视频元素顶部移动时，JQuery UI 可调整大小/可拖动丢失 'grip'

Question

我有一个包含嵌入式 youtube 视频的页面，我正在尝试实现自定义覆盖，您可以在其中使用可调整大小和可拖动的 <div> 定义区域。 (使用 JQuery 用户界面)。

拖动 <div> 时在屏幕的其他区域，它的响应速度非常好，但是在视频上(使用 IFrame API 嵌入，以防万一)，如果您将鼠标移动到爬行以外的任何位置，它会经常“失去控制”调整 handle 或移动 handle 。 IE 和 Chrome 都是这种情况。

JSFiddle 在这里:http://jsfiddle.net/MfZes/1/ (可拖动框在 youtube 框架下方)

有谁知道这是为什么，或者是否可以避免？

提前致谢。

Answer 1

我以前做过。

您可以 Hook jquery ui 的可调整大小和可拖动插件的 dragstart、resizestart、dragstop 和 resizestop 事件。

将视频放在容器 div 中。在视频旁边，插入另一个 div 作为叠加层。将宽度和高度设置为 100%，绝对定位并将显示设置为隐藏。

当调整大小/拖动开始事件触发时，显示覆盖 div。当他们停下来时，把它藏起来。 (您需要隐藏它，因为您仍然希望在不调整大小或拖动时能够与视频进行交互。