无法为 iframe 使用可拖动的 jQuery UI

Posted 2023-05-07

【中文标题】无法为 iframe 使用可拖动的 jQuery UI

【英文标题】：Unable to use jQuery UI draggable for iframe

【发布时间】：2018-12-30 17:37:22

【问题描述】：

我在主站点中有一个 iframe（这是一个机器人图标）。我无法使用 jqueryui draggable() 函数使 iframe 元素可拖动。

下面是sn-p的代码

$("#testIframe").draggable();

#testIframe 
  position: absolute;
  bottom: 0;
  right: 0;
  background: #ccc;
  padding: 10px;
  width: 200px;
  height: 100px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="parent">
Parent text....
  <div class="child">    
    <iframe id="testIframe"   src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0"></iframe>
  </div>
</div>

我的问题：如果您尝试拖动testIframe，则无法拖动它。为什么？

【问题讨论】：

实际上你的 iframe 在这个例子中是可拖动的？它在这里有效，但在您的页面上无效还是有什么问题？

不能在小提琴中工作。这与我在页面中所面对的相似。

如果你拖动灰色边框是可能的，这就是我问的原因！

好吧，它不能在 chrome 中工作，但可以在 Firefox 甚至是糟糕的 Internet Explorer 中工作！看起来 chromes adblocker 正在阻止拖动事件！

我收到了您的问题，并更新了您的问题以进行澄清。

【参考方案1】：

$("#testIframe").draggable();

#testIframe 
  background: #ccc;
  padding: 10px;
  width: 200px;
  height: 100px;
  overflow: hidden;


#testIframe iframe 
  pointer-events: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="parent">
Parent text....
  <div class="child">    
  
  <div id="testIframe"  class="ui-widget-content">
    <iframe   src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0"></iframe>
  </div>
    
  </div>
</div>

它现在正在工作。 iframe 应该被 div 包裹并为此应用 draggable() 函数。

【讨论】：

没有。只有在使用填充区域拖动时才可以拖动。但它应该可以从具有该 id 的 div 内的任何位置拖动

检查我的代码 sn-p。我已经更新了它..现在当用户点击 iframe 的任何地方时它正在工作，但是 iframe 内的这个更新选项卡不再可点击。

那是我不需要的。

@Raviteja 我认为这个答案可以正常工作，但正如你所提到的，这不是你所需要的。我不明白你的问题。可拖动 iframe 需要什么？

@AliSoltani 不，你理解错了。我希望它应该可以从具有该 ID 的 div 内的任何位置拖动。不仅是填充区域。

【参考方案2】：

为您尝试了一种方法，正如您所说，您需要从 div 中拖动 id，检查它是否是您打算使用的。

$("#testIframe").draggable();
var leftClick=false;
$("#child").mousedown(function(e)
    if(e.which === 1) leftClick = true;
);
$("#child").mousemove(function (event)
    if(leftClick)
        $("#draggable").css('left',event.pageX);
        $("#draggable").css('top',event.pageY);
    
);
$(document).mouseup(function(e)
    if(e.which === 1) leftClick = false;
);

#testIframe 
  background: #ccc;
  padding: 10px;
  width: 200px;
  height: 100px;
  overflow: hidden;


#testIframe iframe 
  pointer-events: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="parent">
Parent text....
  <div class="child" id="child">    
  
  <div id="testIframe"  class="ui-widget-content">
    <iframe   src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0"></iframe>
  </div>
    
  </div>
</div>

【讨论】：

iframe 内的点击被阻止。

【参考方案3】：

您提到您希望它只是来自填充区域的draggable，因此iframe 不会受到影响，试试这个：

$("#draggable").draggable();

#draggable 
  width: 200px;
  height: 100px;
  overflow: hidden;
  position:relative;
  background: #ccc;
  padding: 10px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="parent">
Parent text....
  <div class="child">
  <div id="draggable"  class="ui-widget-content">
    <iframe   src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0">       </iframe>
    
  </div>
    
  </div>
</div>

希望我能理解你。

【讨论】：

不，你理解错了。我希望它应该可以从具有该 ID 的 div 内的任何位置拖动。不仅是填充区域。

@Raviteja 哪个 div class="parent"、class="child" 或 id="draggable"。

@Raviteja 在这种情况下，iframe 将被禁用，因此用户无法点击其中的任何内容。这是你想要的吗？或者你希望它是可拖动的，但链接不是？

我希望整个 iframe 都可以拖动

@Raviteja 您不能同时使iframe 可拖动和链接可点击，因为iframe 数据来自另一个域。看看Same-origin policy

【参考方案4】：

很难根据 iFrame 元素本身内部发生的 Click 事件来拖动 iFrame 元素。

mousedown、mouseup 和 click 将针对 iFrame 源的 DOM，并且不会自然地冒泡到您的 Draggable 事件。这就是为什么您可以定位 iFrame 周围的元素，例如 DIV，但您不能定位 iFrame 的内容并让它拖动。

在这种情况下，我想“为什么”很重要。如果您能够按照您描述的方式完成此操作，则意味着与 iFrame 的交互将被取代，实质上违背了 iFrame 的全部目的。如果是这样，为什么不使用 .load() 将所有元素从 Source 绘制到 DIV 中，而不是使用 iFrame？