可拖动的iFrame寄存器点击，而不是拖

问题描述：

我有一个iFrame YouTube视频与它周围的容器：可拖动的iFrame寄存器点击，而不是拖

<div class="draggable resizable ui-draggable ui-draggable-handle"> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Eeue7FWnNJs" frameborder="0" allowfullscreen=""></iframe> 
</div>

什么I'nm试图完成的是让这个视频通过jQuery UI的可拖动，但仍没有拖动时可播放。一些研究的主题后，我来到到以下几点：

iframeFix: true

如.draggable功能的选项，但是，这似乎没有做任何事情，我的问题依然存在。

之后，我试图做一个div出现在阻力为各种各样的叠加：

.frameOverlay 
{ 
    height: 100%; 
    width: 100%; 
    background: transparent; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}

这是我用于覆盖的CSS，然后我放置frameOverlay类股利随机在我的HTML和在Javascript中，我做到了这一点：

$(".draggable").draggable({ 
    start: function(event, ui) { 
    $('.frameOverlay').show(); 
    }, 
    stop: function(event, ui) { 
    $(".frameOverlay").hide(); 
    } 
})

但是，这也没有解决问题。 iframe仍然会记录应该作为点击拖动的内容，从而播放视频。这里是我的问题小提琴：Click me

有没有人有这个问题的工作修复？

感谢。

编辑：我想避免向iframe添加句柄，因为它会（稍微）给用户带来不便。

您是否尝试过增加一个处理？ – Twisty

Your Fiddle缺少jQuery库。只是FYI。 – Twisty

理想情况下，您希望在iframe之前检测事件并决定它们是否通过。可能有可能，但我还没有想出办法，因为事件通常从孩子身上冒出来而不是其他方式。我有一个基于这个想法的部分解决方案，但不确定使用手柄会带来什么不便。您可以切换是否拖动iframe或有权访问它的控件。通过单击该按钮，或者当iframe未被聚焦时在模式之间切换时使用右箭头键。 https://jsfiddle.net/sfzjrw6x/1/ – Trevor

答

下面是如何启用/禁用访问iFrame的示例，如果禁用的事件（如拖动）将可用。

HTML

<button class="btn-drag">Draggable</button> 
<button class="active btn-play">I Frame Controls</button> 
<br /> 
<br /> 
<div id="drag" class="draggable resizable ui-draggable ui-draggable-handle"> 
    <iframe id="frame" width="560" height="315" src="https://www.youtube.com/embed/Eeue7FWnNJs" frameborder="0" allowfullscreen=""></iframe> 
</div>

的Javascript

$(".draggable").draggable({ 
    iframeFix: true 
}); 

$('.btn-drag, .btn-play').click(function(){ 
    if($(this).hasClass('btn-drag')){ 
    $('.btn-drag').addClass('active'); 
    $('.btn-play').removeClass('active'); 
    $('#frame').css('pointer-events','none'); 
    } 
    else{ 
    $('.btn-drag').removeClass('active'); 
    $('.btn-play').addClass('active'); 
    $('#frame').css('pointer-events','auto'); 
    } 
}); 

document.addEventListener("keydown", function (e) { 
    if(!e.keyCode === 39){ 
    return false; 
    } 
    if($('#frame').css('pointer-events') === 'auto'){ 
    $('.btn-drag, .btn-play').toggleClass('active'); 
    $('#frame').css('pointer-events','none'); 
    } 
    else{ 
    $('.btn-play, .btn-drag').toggleClass('active'); 
    $('#frame').css('pointer-events','auto'); 
    } 
});

Fiddle

答

我建议如下：

例子：https://jsfiddle.net/Twisty/3rjy0efa/1/

HTML

<div class="frameOverlay"></div> 
<div class="draggable resizable"> 
    <div class="handle"></div> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Eeue7FWnNJs" frameborder="0" allowfullscreen=""></iframe> 
</div>

CSS

.handle { 
    width: 558px; 
    background: #ccc; 
    border: 1px solid #000; 
    border-radius: 4px; 
    height: 23px; 
    margin-bottom: -3px; 
} 

.frameOverlay { 
    height: 100%; 
    width: 100%; 
    background: transparent; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}

的JavaScript

$(".draggable").draggable({ 
    handle: ".handle", 
    iframeFix: true, 
    start: function(event, ui) { 
    $('.frameOverlay').show(); 
    }, 
    stop: function(event, ui) { 
    $(".frameOverlay").hide(); 
    } 
});

这给你的东西劫掠这不是iFrame中。

可拖动的iFrame寄存器点击，而不是拖

相关推荐