CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggable
giocarmine
giocarmine

Reputation: 580

JQuery-UI Draggable: dragged element size

I'm trying to do the following: I have an icon on a page and when i drag it the icon changes. It has to not go beyond the containment area.

What I've tried is something like this:

$("#myElement").draggalble({
    containment: "#myContainer",
    start: function(event, ui) {
        $(this).attr("width", "20");
        $(this).attr("height", "20");
        $(this).attr("src", "newSource.png");
    }
});

The icon successfully changes and I can drag it. The only problem is the new icon size. It is a little smaller than the original. When I drag it near the boundaries of the container it stops too early, I can't reach container boundaries. Specifically I can't reach the upper and right boundaries but I can still reach the bottom and the left. I think this is because the draggable plugin calculates the icon limits using the size of the old icon.

Does anyone have some advice on how can I drag the new icon and reach the container boundaries?

Thanks in advance :)

Upvotes: 0

Views: 3985

Answers (1)

mccannf
mccannf

Reputation: 16659

To get this to work, I had to create a container object based on the smaller picture's dimensions.

Using the following options - parameters are the container div, small picture width and small picture height respectively:

 containment: shrinkSize("#container",20,20),

and the function does the following:

function shrinkSize(frameId, smallerWidth, smallerHeight) {
    var frameOffset = $(frameId).offset(),
        frameHeight = $(frameId).height()-smallerWidth,
        frameWidth = $(frameId).width()-smallerHeight;

    return ([frameOffset.left, frameOffset.top, frameOffset.left+frameWidth, frameOffset.top+frameHeight]);
}

Fiddle here.

P.S. in the fiddle, the image being dragged reverts to original size when dropped. If this is not the intended behavior, just remove the stop option (with function) from the draggable definition.

Upvotes: 1

Related Questions