Question

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

下面的代码段

$("#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" width="100%" height="300" src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0"></iframe>
  </div>
</div>

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

Answer 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 width="100%" height="300" src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0"></iframe>
  </div>
    
  </div>
</div>

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

Answer 2

您提到希望仅从填充区域起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 width="100%" height="100" src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0">       </iframe>
    
  </div>
    
  </div>
</div>

希望我能理解你。

Answer 3

为您尝试了一种方法，正如您所说的那样，您需要从div中拖动id，并检查是否正是您要使用的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 width="100%" height="300" src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0"></iframe>
  </div>
    
  </div>
</div>

Answer 4

基于发生在 iFrame 元素本身内部的 Click 事件来拖动 iFrame 元素并不容易。

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

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

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

4 个答案: