在视频元素顶部移动时，可调整大小/可拖动的jQuery UI失去了“抓地力”

Question

我有一个带有嵌入式youtube视频的页面，并且正在尝试实现自定义叠加层，您可以在其中使用可调整大小和可拖动的区域<div>（使用JQuery UI）定义区域。

在<div>屏幕上的其他区域拖动鼠标时，它的响应速度非常快，但是在视频上播放（如果使用IFrame API嵌入，则很重要），如果将鼠标移到抓取位置以外的任何位置，它将定期“失去抓地力”在调整大小手柄或移动手柄上。IE和Chrome都是这种情况。

JSFiddle此处：http：//jsfiddle.net/MfZes/1/（可拖动框位于youtube框架下方）

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

提前致谢。

Answer 1

我以前做过

您可以挂钩到jQuery UI的可调整大小和可拖动插件的dragstart，resizestart，dragstop和resizestop事件。

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

当调整大小/拖动开始事件触发时，显示叠加div。当他们停止时，将其隐藏。（您需要隐藏它，因为在不调整大小或拖动时仍希望能够与视频进行交互。