Javascript 可拖动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>

然而，作为

.draggable

函数中的一个选项，这似乎没有起任何作用，我的问题仍然存在

之后，我尝试将一个div作为各种覆盖显示在拖动上：

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

这是我用于覆盖的CSS，然后我在HTML和Javascript中随机放置了一个带有class

frameOverlay

的div：

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

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

有人对此问题有有效的解决方案吗

谢谢

---

编辑：我希望避免在iframe中添加句柄，因为这会（稍微）给用户带来不便。

我建议如下：

iframeFix: true

例如：

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>

<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({
  handle: ".handle",
  iframeFix: true,
  start: function(event, ui) {
    $('.frameOverlay').show();
  },
  stop: function(event, ui) {
    $(".frameOverlay").hide();
  }
});

$(".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');
  }
});

---

这将为您提供一些不在iFrame内的内容。

我建议如下：

iframeFix: true

例如：

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>

<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({
  handle: ".handle",
  iframeFix: true,
  start: function(event, ui) {
    $('.frameOverlay').show();
  },
  stop: function(event, ui) {
    $(".frameOverlay").hide();
  }
});

$(".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');
  }
});

---

这为您提供了一些不在iFrame内部的内容。

这里是一个示例，说明了如果可以使用诸如拖动之类的禁用事件，您如何启用/禁用对iFrame的访问

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>

<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>

---

以下是一个示例，说明如果禁用的事件（如拖动）可用，如何启用/禁用对iFrame的访问

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>

<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>

---

您是否尝试添加句柄？您的小提琴缺少jQuery库。仅供参考。理想情况下，您希望在iframe之前检测事件，并决定它们是否通过。也许是可能的，但我还没有想出一个办法，因为事件通常是从孩子那里冒出来的，而不是从别的地方冒出来的。我有一个部分解决方案，基于这个想法，不确定它是否比使用手柄更方便。您可以切换是拖动iframe还是访问其控件。单击按钮，或者在iframe未聚焦时使用右箭头键在模式之间切换@特雷弗，既然你的小提琴帮助我创造了防御解决方案，你能把这个作为一个答案，这样我就可以奖励你奖金了吗？谢谢：）您尝试添加句柄了吗？您的小提琴缺少jQuery库。仅供参考。理想情况下，您希望在iframe之前检测事件，并决定它们是否通过。也许是可能的，但我还没有想出一个办法，因为事件通常是从孩子那里冒出来的，而不是从别的地方冒出来的。我有一个部分解决方案，基于这个想法，不确定它是否比使用手柄更方便。您可以切换是拖动iframe还是访问其控件。单击按钮，或者在iframe未聚焦时使用右箭头键在模式之间切换@特雷弗，既然你的小提琴帮助我创造了防御解决方案，你能把这个作为一个答案，这样我就可以奖励你奖金了吗？谢谢：）