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?

Answer 1

Bind events to dragstart and dragend, see sample here: Active Drag Demo (number 5)

And addClass() when dragging start with styles that couse image will be bigger, and removeClass() when drag stops.

Answer 2

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 });
    }
});​