title: drag and drop jquery not working between div tags
body: <p>I have a page with a left column which stores "panels" which can be dragged onto the main content area of the page. Dragging a panel to a new "area" in the left column works fine, but if I try to drag it into the main content area it seems to go behind it, even using z-index. I created the following to illustrate: <a href="http://jsfiddle.net/8HQt6/1/" rel="nofollow">JSFiddle</a></p>
  
  <p>FYI  there will be more areas in the main content area to drag to, I just kept it simple for the purposes of this thread. Also in my application the panels are in fact Kendo graphs which require the !important tag to be used on some styling.</p>
  
  <p>Can anyone help?</p>
  
  <p>JScript: </p>
  
  <pre><code>$('.area').droppable({
  tolerance: 'fit'
  });
  
  $('.panel').draggable({
  revert: 'invalid',
  stop: function () {
      $(this).draggable('option', 'revert', 'invalid');
  }
  });
  
  $('.panel').droppable({
  greedy: true,
  tolerance: 'touch',
  drop: function (event, ui) {
      ui.draggable.draggable('option', 'revert', true);
  }
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.area {
  display:inline-block;
  width:100px;
  height:100px;
  border:1px solid silver;
  background-color:yellow;
  padding:10px;
  z-index: 10;
  }
  .panel {
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid silver;
  background-color:white;
  }
  #frameContentLeft {
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;
  width: 200px !important;
  height: 1000px !important;
  background-color: blue;
  }
  #mainContent {
  position: absolute !important;
  left: 200px !important;
  top: 0px !important;
  width: 100% !important;
  height: 1000px !important;
  background-color: red;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="frameContentLeft"&gt;
      &lt;div class="area"&gt;
          &lt;div class="panel"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="area"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="mainContent"&gt;
      &lt;div class="area"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>