title: jQuery-ui droppable to sortable inside iframe
body: <p>I have <code>droppable</code> elements in main frame, and <code>sortable</code> inside iframe app. What I need is to connect them - to be able to drag items to iframe's <code>sortable</code></p>
  
  <p>There is what I've done:
  <a href="http://jsfiddle.net/w9L3eorx/1/" rel="nofollow">http://jsfiddle.net/w9L3eorx/1/</a></p>
  
  <p>Inside <code>iframe</code> I have</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;div class="block"&gt;Foo&lt;/div&gt;
      &lt;div class="block"&gt;Bar&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $('.content').sortable({
          iframeFix: true,
          placeholder: 'block-placeholder',
          update: function (event, ui) {
              // turn the dragged item into a "block"
              ui.item.addClass('block');
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The main frame</p>
  
  <pre><code>&lt;div class='items'&gt;
      &lt;div class="one"&gt;One&lt;/div&gt;
      &lt;div class="two"&gt;Two&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;iframe src="frame.html" id="frame" width="800" height="800"&gt;&lt;/iframe&gt;
  
  &lt;script&gt;
      $('.items div').draggable({
          helper: function(e) {
              return $('&lt;div&gt;').addClass('block').text( $(e.target).text() );
          },
          iframeFix: true,
          connectToSortable: $('.content', $("#frame")[0].contentDocument)
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I see working example <a href="http://ma.rkusa.st/zepto-dnd/example.html" rel="nofollow">http://ma.rkusa.st/zepto-dnd/example.html</a>. But it is built without jquery and is not working on IE9</p>