jquery-ui - can't fix mouse position of dragged element

Question

I have a problem with Jquery-UI when the element is being dragged. The problem is that i want the dragged element to be smaller and this causes the problem when dragged. I tried with event.pageX and event.pageY but this doesn't do the trick.

Please check the fiddle (don't mind the missing images). The thing is the position of the dragged element when dragged: http://jsfiddle.net/rkochev/Ln5ovxov/3/

$('.drag').draggable({
    cursor: 'hand',
    containment: '#container',
    revert: true,
    revertDuration: 500,
    drag: function(event, ui)
    {
        $(this).css("width","41px").css("height","40px").css("font-size","3px");
        $(this).css("left",event.pageX+"px").css("top",event.pageY+"px");
    },
    stop: function(event, ui)
    {
        $(this).css("width","217px").css("height","97px").css("font-size","15px");
        var num = parseInt( $(this).attr('id').split("_")[1] );
    }
});

I want the dragged element to be in the center of the mouse pointer when dragged.

I would appreciate any suggestions.

Many thanks,
Rado

Answer 1

If you want drag some static content use cursorAt property like this:

...cursorAt: { top: 17, left: 17 },...

If you use dynamic content, probably you might use helper property of draggable plugin ( read here )