title: Make custom HTML elements droppable in iframe
body: <p>I like to have a list which elements can be dropped in a list in an iframe similar to <a href="http://jqueryui.com/draggable/#sortable" rel="nofollow noreferrer">this example</a>. I found a working solution via <a href="https://stackoverflow.com/questions/14928210/jquery-sortable-and-draggable-between-parent-and-child-frame">this thread</a> but in my case I need other elements than <code>&lt;li&gt;</code>'s.</p>
  
  <p>Here's my setup:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;ul&gt;
          &lt;li&gt;To drop 1&lt;/li&gt;
          &lt;li&gt;To drop 2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;iframe id="frame" src=""&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>and the iframe content:</p>
  
  <pre><code>&lt;ul id="sortable"&gt;
      &lt;li&gt;Element&lt;/li&gt;
      &lt;li&gt;Element&lt;/li&gt;
      &lt;li&gt;Element&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This works as you can see <a href="http://jsfiddle.net/8cx4pe2y/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>It even works when changing the <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code>'s to <code>&lt;div&gt;</code> (<a href="http://jsfiddle.net/8cx4pe2y/1/" rel="nofollow noreferrer">example</a> and <a href="http://jsfiddle.net/dd9wf04w/2/" rel="nofollow noreferrer">iframe</a>).</p>
  
  <p>When I use custom tags <a href="http://jsfiddle.net/8cx4pe2y/2/" rel="nofollow noreferrer">it's working</a> with <code>&lt;foo&gt;</code> and <code>&lt;bar&gt;</code> tags but what I really need is to get it working with <code>&lt;modules&gt;</code> and <code>&lt;module&gt;</code> tags.</p>
  
  <pre><code>&lt;foo id="sortable"&gt;  //WORKS!!
      &lt;bar&gt;Element&lt;/bar&gt;
      &lt;bar&gt;Element&lt;/bar&gt;
      &lt;bar&gt;Element&lt;/bar&gt;
  &lt;/foo&gt;
  
  &lt;modules id="sortable"&gt; //DOESN'T WORK!!
      &lt;module&gt;Element&lt;/module&gt;
      &lt;module&gt;Element&lt;/module&gt;
      &lt;module&gt;Element&lt;/module&gt;
  &lt;/modules&gt;
  </code></pre>
  
  <p>Here's <a href="http://jsfiddle.net/8cx4pe2y/3/" rel="nofollow noreferrer">the fiddle</a> and the <a href="http://jsfiddle.net/dd9wf04w/4/" rel="nofollow noreferrer">iframe</a> of what I actually need to work.</p>
  
  <p>So basically the <strong>draggable</strong> and <strong>sortable</strong> method is not working with my custom html tags. What's so different between <code>&lt;foo&gt;</code>, <code>&lt;bar&gt;</code> and <code>&lt;modules&gt;</code>, <code>&lt;module&gt;</code>?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>It seems this is an issue on webkit browsers only since it's working fine on FF - wasn't able to test on a Windows machine yet.</p>
  
  <p>When dragging the element it will create a "helper" which gets some inline style:</p>
  
  <pre><code>position:absolute;left:XXXpx;right:XXXpx;width:XXXpx;heightXXXpx;z-index:1000
  </code></pre>
  
  <p>while on webkits it only get <code>position</code>, <code>left</code> and <code>right</code>:</p>
  
  <pre><code>position:absolute;left:XXXpx;right:XXXpx;
  </code></pre>