可拖動的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添加句柄，因爲它會（稍微）給用戶帶來不便。

來源

2017-02-16 Wesley Peeters

您是否嘗試過增加一個處理？ – 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

來源

2017-02-22 12:34:07 Trevor

我建議如下：

例子：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中。

來源

2017-02-16 21:43:19 Twisty

可拖動的iFrame寄存器點擊，而不是拖

回答

相關問題