Question

I am having a few issues trying to get some basic jquery functionality working correctly.

I simply want to be able to drag an image (or multiple images) into a container and then resize them.

So far I have this

http://jsbin.com/ipoxe5/edit

The specific problems I am having are:

1) Can’t get resize handles to display around the edge of the image

2) As soon as you click an image it ‘jumps’ directly into the containment div (#droppable) – You do not see any smooth drag animation, it just jumps directly to the div. I would like to actually have to ‘drag’ the image into the contasiment div rather than it auto jumping directly in as soon as you click an image.

Any ideas what I am doing wrong?

Answer 1

The containment option “Constrains dragging to within the bounds of the specified element or region.”

If you want the images to be draggable, both inside and outside the dropzone, then you need to specify a container larger than just the droppable div.

Looking at the code for resizable, there is only code to add the visible handle on the lower right corner:

if ('se' == handle) {
        axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
                };

So, it doesn’t look like the visible handles are supported currently out of the box, you may need to add that functionality yourself.