Jquery UI Draggable: Align helper to mouse position

Try setting like this,

       start: function (event, ui) {
                $(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left);
                $(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top);
            }

Take a look at this jqFAQ.com , it will be more helpful for you.

After trying Amar's answer and realizing that it screws up interactions with droppable, I dug deeper, and found that there is an option specifically to support this called cursorAt.

$('blah').draggable
  helper: ->
    ... custom helper ...
  cursorAt:
    top: 5
    left: 5

This places the top-left corner of the helper 5 pixels above and to the left of the cursor, and interacts correctly with droppable.

http://api.jqueryui.com/draggable/#option-cursorAt

And let's give credit where credit is due. Thanks, jquery-ui mailing list archives!

https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw