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

Posted 2023-05-09

【中文标题】可拖动 iFrame 寄存器单击而不是拖动

【英文标题】：Draggable iFrame registers click instead of drag

【发布时间】：2017-07-05 11:37:12

【问题描述】：

我有一个指向 YouTube 视频的 iFrame，周围有一个容器：

<div class="draggable resizable ui-draggable ui-draggable-handle">
    <iframe   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 既然你的小提琴帮助我创建了防御性解决方案，你会发布这个作为答案，所以我可以奖励你赏金吗？谢谢:)

【参考方案1】：

我建议如下：

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

HTML

<div class="frameOverlay"></div>
<div class="draggable resizable">
  <div class="handle"></div>
  <iframe   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"   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