title: jQuery ui draggable drop into an iframe
body: <p>I am trying to use jQuery ui draggable and droppable and it works fine if i try on the same page. But when I try to drag an element and drop into the droppable area defined in the iframe then it doesn't work perfectly. It works but not on whole droppable area in the iframe and its also droppable outside the frame.</p>
  
  <p>Here is what i did</p>
  
  <p>My main page : Home.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;
      &lt;title&gt;jQuery UI Draggable&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet"&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function () {
              $("#FirstDiv").draggable({ revert: "invalid",iframeFix: true });
              $("#SecondDiv").draggable({ revert: "invalid" });
              $("#frame").load(function () {
                  var $this = $(this);
                  var contents = $this.contents();
                  contents.find('.DroppableDiv').droppable({
                      drop: function (event, ui) { alert('dropped'); }
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="cursor: auto;" &gt;
  
  &lt;div class="demo"&gt;
  &lt;div id="mainDiv" style="background-color: #FAE6B6; height:200px"&gt;
  &lt;div id="FirstDiv" style=" border-style:solid; border-width:1px; font-size:medium; height:20px; width:300px"&gt;First Div&lt;/div&gt;
  &lt;div id="SecondDiv" style=" border-style:solid; border-width:1px; font-size:medium; height:20px; width:300px"&gt;Second Div&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;iframe id="frame" src="test.html" style="width: 800px; height: 400px"&gt;&lt;/iframe&gt;
  
  &lt;/body&gt;&lt;/html&gt; 
  </code></pre>
  
  <p>And here is my iframe content test.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;jQuery UI Draggable - inner html&lt;/title&gt;
      &lt;style&gt;
       .DroppableDiv {
          background-color:red;
          height: 500px;
          width: 500px;
       }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="cursor: auto;"&gt;
      &lt;div class="DroppableDiv"&gt;
      &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>