title: Jquery draggable outside of overflow hidden?
body: <p>Here is what i have for now, look on stackoverflow everywhere and all solution didnt worked for me :( The problem is that i use draggable and resizable on some elements etc. pictures that are places in container that has overflow property.That comes the problem with draggable, i want ot move that object over the picture at the top of the page, but the element always goes under the picture on top.Strane issue is if i first to resizable, than i possible to move element over the picture, before that no a change :( Another strane problem is that i first to resizable, second object comes over that element, just overlaping it?</p>
  
  <p>I have tried many solution for this two fixes, but no luck. Here is what i have for now</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#zidomotac{
      width:100%;
  
  }
  #myWorkContent{
  width:100%;
  
      overflow-x: scroll;
  
      white-space: nowrap;
      box-sizing:border-box;
      margin-bottom:20px
      }
  .slikezamenjanje{
      width: 100px;
      float:left;
      display: inline-block;
      vertical-align: middle;
  }
  .slikezamenjanje img{
      max-height: 120px;
      overflow:hidden;
      width: 100%;
  }
  </code></pre>
  
  <p><strong>EXTERNAL</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>FUNCTIONS</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $('.slikezamenjanje').draggable().resizable({
        aspectRatio: 16 / 9,
      });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="zidomotac"&gt;&lt;img src="http://www.vectorimages.org/09/0920100513111825424.jpg"&gt;&lt;/div&gt;
  
  &lt;div id="myWorkContent"&gt;
  
    &lt;div class="slikezamenjanje"&gt;&lt;img src="http://placekitten.com/200/200/"/&gt;&lt;/div&gt;
  &lt;div class="slikezamenjanje"&gt;&lt;img src="http://placekitten.com/200/200/"/&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the working jsfiddle
  <a href="http://jsfiddle.net/gorostas/CS93M/">http://jsfiddle.net/gorostas/CS93M/</a>
  I hope someone will find solution</p>
  
  <p><strong>EDITED</strong></p>
  
  <p>Maybe i can make first invoke resizable and then inside draggable?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>If i use draggable like this</p>
  
  <pre><code>        $(document).ready(function() {
  $(".slikezamenjanje").draggable({
              revert: "invalid" ,
              helper: function(){
                  $copy = $(this).clone();
                  return $copy;},
              appendTo: 'body',
              scroll: false
          });
          });
  </code></pre>
  
  <p>I can move element over, but the problem it is coming back?</p>