Q:

Jquery draggable outside of overflow hidden?

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?
I have tried many solution for this two fixes, but no luck. Here is what i have for now
CSS
#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%;
}

EXTERNAL
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

FUNCTIONS
<script type="text/javascript">
        $(document).ready(function() {
            $('.slikezamenjanje').draggable().resizable({
      aspectRatio: 16 / 9,
    });
        });
    </script>

HTML
<div id="zidomotac"><img src="http://www.vectorimages.org/09/0920100513111825424.jpg"></div>

<div id="myWorkContent">

  <div class="slikezamenjanje"><img src="http://placekitten.com/200/200/"/></div>
<div class="slikezamenjanje"><img src="http://placekitten.com/200/200/"/></div>

</div>

</div>

This is the working jsfiddle
http://jsfiddle.net/gorostas/CS93M/
I hope someone will find solution
EDITED
Maybe i can make first invoke resizable and then inside draggable?
UPDATE
If i use draggable like this
        $(document).ready(function() {
$(".slikezamenjanje").draggable({
            revert: "invalid" ,
            helper: function(){
                $copy = $(this).clone();
                return $copy;},
            appendTo: 'body',
            scroll: false
        });
        });

I can move element over, but the problem it is coming back?

A:

I fixed the fiddle, I hope it does what you wanted !
You can try it here :
DEMO
What I've changed :
JQuery :
$(function() {
    $( ".slikezamenjanje" ).draggable({
        revert: 'invalid',
        helper: 'clone',
        start: function(){ //hide original when showing clone
            $(this).hide();             
        },
        stop: function(){ //show original when hiding clone
            $(this).show();
        }
    });

    $( "#zidomotac" ).droppable({ //set container droppable
        drop: function( event, ui ) { //on drop
            ui.draggable.css({ // set absolute position of dropped object
                top: ui.position.top, left: ui.position.left
            }).appendTo('#zidomotac'); //append to container
        }
    });
});

I added a droppable state on your container, so you will be able to drag and drop inside.
Then I used the drop event which allows me to get the element (ui.draggable) and the position (ui.position) of the dropped element.
So I set the absolute position with .css() and then append to the container with .appendTo().
For .draggable(), I just added start and stop events to show/hide original element when the clone is hidden/shown.
CSS :
/* Custom style for dropped element */
#zidomotac .slikezamenjanje { 
    position: absolute;
}

Just added this class to apply style for dropped element.
Hope I helped you ;)

