title: How to bring dragged div to top of everything while using two scrollers?
body: <p>I have two horizontal scrollers and I need to drag div from upper scroller to lower scroller. This is working fine but the problem is that the dragged div gets lost under the scroller borders while dragged. Dragging comes from <code>jquery-UI</code> and scrollers smoothdivscroll.</p>
  
  <p>Is there a way to fix it or should i start from scratch?</p>
  
  <p>Here it is in <a href="http://jsfiddle.net/yCESP/" rel="nofollow">http://jsfiddle.net/yCESP/</a></p>
  
  <p>Here is list of jquery plugins. </p>
  
  <pre><code>jquery-ui-1.10.4.custom.min.js
  jquery.mousewheel.min.js
  jquery.kinetic.min.js
  jquery.smoothdivscroll-1.3-min.js
  jquery.ui.touch-punch.min.js
  </code></pre>
  
  <p>Here is code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="mainColumn"&gt;
          &lt;div id="mixedContent2" &gt;
              &lt;div class="koko_koira" style="background-color:#4254a3;color:white;"&gt;
                  &lt;br/&gt;
                  &lt;p&gt;1&lt;/p&gt;
              &lt;/div&gt; 
              &lt;div class="koko_koira" style="background-color:#4254a3;color:white;"&gt;
                  &lt;br/&gt;
                  &lt;p&gt;2&lt;/p&gt;
              &lt;/div&gt; 
              &lt;div class="koko_koira" style="background-color:#4254a3;color:white;"&gt;
                  &lt;br/&gt;
                  &lt;p&gt;3&lt;/p&gt;
              &lt;/div&gt; 
              &lt;div class="koko_koira" style="background-color:#4254a3;color:white;"&gt;
                  &lt;br/&gt;
                  &lt;p&gt;4&lt;/p&gt;
              &lt;/div&gt; 
              &lt;div class="koko_koira" style="background-color:#4254a3;color:white;"&gt;
                  &lt;br/&gt;
                  &lt;p&gt;5&lt;/p&gt;
              &lt;/div&gt; 
              &lt;div class="koko_koira" style="background-color:#4254a3;color:white;"&gt;
                  &lt;br/&gt;
                  &lt;p&gt;6&lt;/p&gt;
              &lt;/div&gt; 
              &lt;div class="koko_koira" style="background-color:#4254a3;color:white;"&gt;
                  &lt;br/&gt;
                  &lt;p&gt;7&lt;br&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="mixedContent" &gt;
              &lt;div class="contentBox" style="background-color:#4254a3;color:white;"&gt;
                  &lt;br/&gt;
                  &lt;p&gt;FIRST&lt;/p&gt;
              &lt;/div&gt; 
              &lt;div class="contentBox" style="background-color:white;color:black;"&gt;
                  &lt;p&gt;SECOND&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="contentBox" style="background-color:grey;color:white;"&gt;
                  &lt;p&gt;THIRD&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wrapper {
      z-index:0;
  }
  
  #mainColumn {
      z-index:0;
  }
  
  #mixedContent {
      width:80%;
      height: 330px;
      position: relative;
      display: block;
      z-index:1;
      border:2px;
      border-style:solid;
      border-color:#093;
  }
  
  #mixedContent .contentBox {
      position: relative;
      float: left;
      display: block;
      height: 250px;
      width: 250px;
      border: solid 1px #ccc;
      padding: 10px;
      margin: 0px 5px;
      font-family:Verdana, Geneva, sans-serif;
      font-size:12px;
      text-align:center;
      -webkit-border-radius:5px; 
      -moz-border-radius:5px; 
      border-radius:5px;
      margin:5px 5px 5px 5px;
      box-shadow: 2px 2px 2px #585858;
      z-index:0;
  }
  
  #mixedContent .contentBox img {
      margin-bottom: 10px;
  }
  
  #mixedContent .contentBox p {
      font-size: 10px;
  }
  
  #mixedContent2 {
      width:80%;
      height: 330px;
      position: relative;
      display: block;
      z-index:1;
      border:2px;
      border-style:solid;
      border-color:#06C;
  }
  
  .koko_koira {
      position: relative;
      float: left;
      display: block;
      height: 200px;
      width: 128px;
      border: solid 1px #ccc;
      padding: 10px;
      margin: 0px 5px;
      font-family:Verdana, Geneva, sans-serif;
      font-size:12px;
      text-align:center;
      -webkit-border-radius:5px; 
      -moz-border-radius:5px; 
      border-radius:5px;
      margin:5px 5px 5px 5px;
      box-shadow: 2px 2px 2px #585858;
      z-index:50;
  }
  
  .koko_koira img {
      margin-bottom: 10px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
      $("#mixedContent").smoothDivScroll({
          hotSpotScrolling: false,
          touchScrolling: true
      });
  });
  
  $(document).ready(function() {
      $("#mixedContent2").smoothDivScroll({
          hotSpotScrolling: false,
          touchScrolling: true
      });
  });
  
  $( ".koko_koira" ).draggable({
      revert: "invalid",
      helper: "clone",
      cursor: "move",
  });
  
  $( ".contentBox" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function(event, ui) {
          $(this)
              .addClass("ui-state-highlight")
              .find("p")
              .html("Dropped!");
      }
  });
  </code></pre>