Javascript JQuery UI可调整大小/可拖动丢失'；握把'；在视频元素上方移动时

我有一个嵌入youtube视频的页面，我正在尝试实现一个自定义覆盖，您可以使用可调整大小和可拖动的

（使用JQuery UI）定义区域

在屏幕的其他区域拖动

时，它的响应非常灵敏，但在视频上（使用IFrame API嵌入，以防万一），如果在爬行以外的任何位置移动鼠标，它会经常“失去对调整大小手柄或移动手柄的抓地力”。IE和Chrome都是如此

JSFiddle here：（可拖动框位于youtube框架下方）

有人知道这是为什么，或者这是可以避免的吗

提前谢谢。

我以前做过

您可以钩住jQueryUI的可调整大小和可拖动插件的dragstart、resizestart、dragstop和resizestop事件

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

---

当“调整大小/拖动开始”事件触发时，显示覆盖分区。当它们停止时，隐藏它。（您需要隐藏它，因为在不调整大小或拖动的情况下，您仍然希望能够与视频交互。

我也有同样的问题，但在画布上悬停：

$('.DraggableDiv').draggable({
    start : function() {
        var d = document.createElement('div');
        $(d).addClass('canvas_shadow');
        $('.canvasContainer').append(d);
    },
    stop : function() {
        $( ".canvas_shadow" ).remove();
});

为.canvas\u shadow添加css：

.canvas_shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.1;
  z-index: 80;
}

---

Fwiw，我最好的猜测是，当鼠标指针在调整大小期间短暂地“领先”于元素的外边缘时，鼠标事件被它后面的视频元素捕获，而不是传播回覆盖div。不确定是否有什么可以做的。我从来没有需要做过，但您可以替换它e带有静态占位符的视频元素（如img）调整大小时。这有点混乱，但可能是你最好的选择…如果它能工作的话。事件不会通过iframe嵌入进行传播，这是由于浏览器安全性，并且工作正常。这是有意义的。谢谢，Jarek。这非常有帮助，我很惊讶在jQuery UI文档中找不到它。它适用于任何div，而不仅仅是vide好消息！