2

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

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

这里的JSFiddle：http: //jsfiddle.net/MfZes/1/（可拖动框位于 youtube 框架下方）

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

提前致谢。

4

2 回答 2

5

我以前做过。

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

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

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

于 2013-03-08T16:09:51.340 回答
0

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

$('.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;
}
于 2017-04-05T07:30:13.120 回答