title: jQuery UI draggable on a nested element with pointer-events: none
body: <p>I have an iframe element that I'd like to make resizable and draggable. I'd also like for the user to be able to drag it around by clicking and dragging inside the iframe.</p>
  
  <p>Here is a jsfiddle:
  <a href="http://jsfiddle.net/t9DT8/9/" rel="nofollow">http://jsfiddle.net/t9DT8/9/</a></p>
  
  <p>iframe element is wrapped into a container div. The container div is made resizable and draggable.</p>
  
  <p>The problem is that when using <code>pointer-events: none</code> on the iframe, it passes the click event nicely, but then when dragging it around it becomes glued to the cursor and click events doesn't come through anymore. Try dragging the youtube video in jsfiddle for the demo.</p>
  
  <p>Question: how to make iframe element draggable so that you can drag it by clicking inside the iframe element, and it would let you go once you stop dragging?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="demo"&gt;
      &lt;div id="resizable" class="ui-widget-content"&gt;
          &lt;iframe width="100%" height="100%" src="//www.youtube.com/embed/9ZkWjkvaKpA" class="ui-widget-content" frameborder="no" id="test" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function () {
      $("#resizable").resizable({
          helper: "ui-resizable-helper"
      });
      $("#resizable").draggable();
  });
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>#resizable {
      width: 150px;
      padding: 15px;
      cursor: move;
      z-index: 1;
  }
  .ui-resizable-helper {
      border: 10px solid #efefef;
      margin: -10px;
  }
  
  #resizable iframe {
    pointer-events: none;
      z-index: 100;
  }
  </code></pre>
  
  <p>Update: The solution appears to work fine on Firefox, "gluing" problem is only reproducible on Chrome :/</p>