title: Jquery drag & drop to iframe and sort inside of it
body: <p>I want to drag and drop element into iframe and sort it inside the iframe</p>
  
  <p>Here is my code :</p>
  
  <pre><code>&lt;div class="draggable"&gt;
     &lt;img class="img" width="50%" src="http://www.skrenta.com/images/stackoverflow.jpg"&gt;
  &lt;/div&gt;
  
  &lt;iframe id="phone-iframe" width="100%" height="100%" src="iframe.html" frameborder="0"&gt;&lt;/iframe&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
      $('#phone-iframe').load(function () {
          $('#phone-iframe').contents().find('.sortable').sortable({
              connectWith: ".sortable",
              revert: true
          });
          $( ".draggable" ).draggable({
              connectToSortable: $('#phone-iframe').contents().find('.sortable'),
              iframeFix: true,
              helper: "clone",
              revert: "invalid",
              zIndex: 2,
              opacity: 0.74,
              appendTo: 'body',
              distance: 15
          });
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>Iframe code :</p>
  
  <pre><code>&lt;ul class="sortable"&gt;
    &lt;li&gt;I'm sortable&lt;/li&gt;
    &lt;li&gt;Me too&lt;/li&gt;&lt;/ul&gt; 
  </code></pre>
  
  <p>It is working but there is a position problem on iframe. It's not working when you drag inside to the iframe (if i change to iframe position to 0px X 0px it works. )</p>
  
  <p>Here is my code : <a href="http://tekdogru.com/iframexample/" rel="nofollow">http://tekdogru.com/iframexample/</a></p>