title: Unable to use jQuery UI draggable for iframe
body: <p>I've an iframe(which is a bot icon) in a main site. I am unable to make the iframe element draggable using jqueryui <code>draggable()</code> function.</p>
  
  <p>The code snippet is below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#testIframe").draggable();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#testIframe {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ccc;
    padding: 10px;
    width: 200px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;div class="parent"&gt;
  Parent text....
    &lt;div class="child"&gt;    
      &lt;iframe id="testIframe" width="100%" height="300" src="//jsfiddle.net/iamraviteja/09hdej6t/2/embedded/" frameborder="0"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p><strong>My Problem:</strong>  If you try to drag  <code>testIframe</code>, you can't drag it. Why?</p>
  </blockquote>