How do I make a JQuery Draggable with a smaller clone?

jquery, jquery-ui, jquery-ui-draggable

Solution

Simplest approach by far is to use the `cursorAt` option with 'left' and 'top' set to half the dimensions of the shrunken helper.

$(".draggable").draggable({
    helper: 'clone',
    start: function (e, ui) {
        ui.helper.animate({
            width: 80,
            height: 50
        });
    },
    cursorAt: {left:40, top:25}
});

Updated fiddle

Problem

I have a large element that is displayed on the screen that I would like to be able to drop on a smaller drop target. Therefore, I want to decrease the size of the draggable clone to match the size of the drop target. I thought it would look nice to animate this. I can't seem to get the smaller clone to center around the cursor while dragging though. Any ideas? Here is a what I tried: http://jsfiddle.net/a3Cj2/ ``` $( ".draggable" ).draggable({ helper: 'clone', start : function(event, ui){ ui.helper.animate({ width: 80, height: 50 }); }, drag : function(event, ui){ ui.helper.offset({ left: event.pageX, top: event.pageY }); } }); $("#target").droppable({ drop : function(event, ui) { console.log('dropped'); } }); ```

Original source