无法使用iframe的jQuery UI draggable

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应该用一个divapplydraggable()函数来包装。