可拖动 iFrame 寄存器单击而不是拖动答案

【问题标题】：Draggable iFrame registers click instead of drag可拖动 iFrame 寄存器单击而不是拖动
【发布时间】：2017-07-05 11:37:12
【问题描述】：

我有一个指向 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>

我试图完成的是让这个视频可以通过 jQuery UI 拖动，但在没有被拖动时仍然可以播放。在对该主题进行了一些研究后，我得出了以下结论：

iframeFix: true

作为.draggable 函数中的一个选项，但是，这似乎没有任何作用，我的问题仍然存在。

在那之后，我尝试让一个 div 在拖动时显示为各种叠加：

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

这是我用于叠加层的 CSS，然后我在我的 HTML 和 Javascript 中随机放置了一个类为 frameOverlay 的 div，我这样做了：

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

但是，这也没有解决问题。 iframe 仍然将应该是拖动的内容注册为单击，使其播放视频。这是我的问题：Click me

有没有人可以解决这个问题？

谢谢。

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

【问题讨论】：

你试过加句柄吗？
您的 Fiddle 缺少 jQuery 库。仅供参考。
理想情况下，您希望在 iframe 之前检测事件并决定它们是否通过。可能是可能的，但我还没有想出办法，因为事件通常是从孩子那里冒出来的，而不是其他方式。基于这个想法，我有一个部分解决方案，不确定它是否比使用手柄更不方便。您可以切换是否拖动 iframe 或访问它的控件。通过单击按钮或在 iframe 未聚焦时使用右箭头键在模式之间切换。 jsfiddle.net/sfzjrw6x/1
@Trevor 既然你的小提琴帮助我创建了防御性解决方案，你会发布这个作为答案，所以我可以奖励你赏金吗？谢谢:)

标签： javascript jquery jquery-ui iframe

【解决方案1】：

我建议如下：

示例：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 内的东西。

【讨论】：

【解决方案2】：

下面是一个示例，说明如何启用/禁用对 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

【讨论】：