jQuery UI Draggable set drag size

Question

I have a number of small icons which are draggable via jQuery which i clone, can i make the draggable icon larger when drag starts?

Solution

You could set the .height() and .width() using the start and stop events, something like this:

$(".icon").draggable({
    start: function() {
        $(this).height(100).width(100);   //drag dimensions
    },
    stop: function() {
        $(this).height(50).width(50);     //original icon size
    }
});​

You can give it a try here, or a bit more compact:

$(".icon").draggable({
    start: function() {
        $(this).css({ height: 100, width: 100 });
    },
    stop: function() {
        $(this).css({ height: 50, width: 50 });
    }
});​

Comments

[Nick Craver]

This is a different dragging library, the OP is referring specifically jQuery UI Draggable, found here: jqueryui.com/demos/draggable

[Dooie]

That is sooo cool, thx. One last question. I want to leave the original icon in place with the original dimensions?

[Nick Craver]

@Dooie - You can set the helper: 'clone' option, is this what you're looking for? jsfiddle.net/nick_craver/8QteZ/2