title: jquery: make item in parent window draggable from within iframe
body: <p>I have an issue with making an element in a parent window draggable. Im trying to make it draggable from within an iframe. There is not really a workaround, i.e. I cannot include jquery in the parent window.</p>
  
  <p>I wrote a very simple test code so I could rule out issues with the website itself but I got the same problem. I ll copy it for you for better understanding:</p>
  
  <p>[outside.html]</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="draggable" style="background-color: rgb(100, 100, 100);width: 400px; height: 300px;"&gt;
      &lt;iframe id="i" src="inner.html" style="width: 390px; height: 290px; margin-top: 6px;"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>[inside.html]</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;&lt;/title&gt;
  
  &lt;script language="JavaScript" src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script language="JavaScript" src="jquery-ui-1.10.1.custom.min.js"&gt;&lt;/script&gt;
  &lt;script language="JavaScript" src="jquery.ui.selectmenu.js"&gt;&lt;/script&gt;
  &lt;script language="JavaScript" src="slides.min.jquery.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
  
        // Make div container draggable
  
      $('#draggable', window.parent.document).draggable({
  
      });
  
  });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  inner
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thats it. What happens is that the div doesnt really become draggable. When I click it it just kind of jumps around randomly. When I let the mouse go and try to drag it again nothing happens to it at all.
  Does anyone have any idea what the issue might be? 
  Thank you!</p>