Question

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

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

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

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

提前致谢。

Answer 1

我以前做过这个。

你可以挂钩到dragquart，resizestart，dragstop和resizestop事件的jquery ui的可调整大小和可拖动的插件。

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

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

Answer 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;
}

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

2 个答案: