在视频元素上移动时，JQuery UI 可调整大小/可拖动会失去“抓地力”答案

【问题标题】：JQuery UI resizable/draggable loses 'grip' when moving on top of video element在视频元素上移动时，JQuery UI 可调整大小/可拖动会失去“抓地力”
【发布时间】：2013-01-18 16:12:44
【问题描述】：

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

当在屏幕的其他区域拖动<div> 时，它的响应非常好，但是当在视频上（使用 IFrame API 嵌入，以防它很重要）时，如果您在爬行以外的任何地方移动鼠标，它将定期“失去控制”调整大小手柄或移动手柄。 IE 和 Chrome 都是这种情况。

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

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

提前致谢。

【问题讨论】：

Fwiw，我最好的猜测是，当鼠标指针在调整大小期间短暂地“领先”到元素的外边缘时，鼠标事件被它后面的视频元素捕获，而不是传播回覆盖 div。不确定是否有什么可以做的。
我从来不需要这样做，但您可以在调整大小时用静态占位符（例如 img）替换视频元素。这有点乱，但可能是你最好的选择......如果它有效的话。
事件不会被 iframe 嵌入传播，这是由于浏览器的安全性，并且按预期工作。
有道理。谢谢，贾雷克。

标签： javascript jquery jquery-ui youtube-api jquery-ui-resizable

【解决方案1】：

我以前做过。

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

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

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

【讨论】：

这非常有用，我很惊讶在 jQuery UI 文档的任何地方都找不到它。它适用于任何 div，而不仅仅是视频。很棒的提示！

【解决方案2】：

我遇到了同样的问题，但是在画布上悬停：

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

为 .canvas_shadow 添加 css：

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

【讨论】：