title: jQuery ui draggable element gets under other draggable elements
body: <p>I have a style problem with jQuery Ui draggable elements.
  here what i have </p>
  
  <p><a href="http://jsfiddle.net/zbo7g5nz/1/" rel="nofollow">FIDDLE</a></p>
  
  <p>As u can see, i have two droppable areas , in each area elements are draggable, and can drag and drop element from one block to another
  The only problem here , that when i am dragging element from top block to below block, the dragging element gets under droppable are elements, but when i am dragging from bottom are to top there is no such problem.</p>
  
  <p>Here is the code for dragging</p>
  
  <pre><code>$(".slide").draggable({
      // brings the item back to its place when dragging is over
      revert:true,
      // once the dragging starts, we decrease the opactiy of other items
      // Appending a class as we do that with CSS
      start: function(event, ui) { $(this).css("z-index", a++); },
      drag:function () {
          $(this).removeClass('droped');
      },
      // adding the CSS classes once dragging is over.
      stop:function () {
          $(this).addClass('droped');
      },
      zIndex: 10000,
      snapMode: "inner"
  });
  </code></pre>
  
  <p>Can anybody help me please, i am working on it already 2 days, and can't figure out what is the problem, i have tried to change z-index positions of every block, but no result;</p>