CODEWITHSUNDEEP
javascriptjqueryjquery-ui
rkochev
rkochev

Reputation: 63

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

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

Upvotes: 0

Views: 172

Answers (1)

BordiArt
BordiArt

Reputation: 756

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)

Upvotes: 1

Related Questions