JQuery UI problems on Draggable and Resizable images

Question

I'm having real headaches trying to work out a problem I have at the moment on a web page, I hope you can give me a hand :D. I have dive for a related topic but I've not found any one with the same problem, using several images.

What I want to achieve: "I want to include draggable and resizable images in a div". The images one by on are added when a link is clicked.

I have mainly 3 problems(also explained with images):

• When I add a new item and it's marked as resizable, it appears below the last image, instead of beside. (When it's nor marked as resizable it appears beside) https://i.sstatic.net/1dBXF.jpg

• When I drag an image, changing his Y axis, and then try to resize it, it's automatically moved to the las Y axis position (X is consistent). https://i.sstatic.net/rF9KK.jpg

• When I drag an image, and after I try to resize the other one, the Y position of the dragged image changes. h**p://i.sstatic.net/OMWEr.jpg

I don't know what to do, thanks a lot.

Answer 1

I tried an attempt to recreate what you wanted to achieve and arrived at this sample
I hope it helps in some way.

Here is my resolution to the problems you are encountering:
Problem 1:
I achieved the separation of the resizable and the non-resizable images by by assigning them into separate divs. (seems easier that way :P).

Problem 2 & Problem 3:
I was not able to encounter this two problems, are you using alsoResize or grid options?


[Updated Post]
I saw the problem you were encountering and modified my initial code, here is the result.
I provided comments on the lines that I updated.

the resizing problem you were encountering is because the img element is not absolutely positioned in the page.

I hope that this helps you in some way :)