JQuery dragging beyond overflow?

Question

Here is what I have now, look at stackoverflow everywhere and the whole solution did not work for me :( The problem is that I use draggable and resizable on some elements, etc. the pictures that are places in the container with redundant property. there is a problem with draggable, I want this object to move above the image at the top of the page, but the element always falls under the image above. The problem is that I resize first, than I can move the element on top before that changes :( Another difficult problem is Does it mean that I first resize, the second object goes beyond this element, just overlapping it?

I tried many solutions for these two fixes, but no luck. That's what I am at the moment

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 a working jsfiddle http://jsfiddle.net/gorostas/CS93M/ I hope someone finds a solution

EDITED

Maybe I can make the first call 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 the item, but is the problem coming back?

Answer 1

I fixed the violin, I hope that it will do what you wanted! You can try it here: DEMO

What I 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 deleteable state to the container, so you can drag it 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 using .css() and then add to the container using .appendTo() .

For .draggable() I simply added start and stop events to show / hide the source element when the clone is hidden / shown.

CSS:

 /* Custom style for dropped element */ #zidomotac .slikezamenjanje { position: absolute; } 

This class has simply been added to apply style to the dropped item.

I hope I helped you;)