Make center cursor position for ui.helper in jquery-ui draggable method

Question

I want the cursor to be in the center for the ui.helper being dragged .

I do it like this

$(".soclass").draggable({ cursor: "move", helper: 'clone', revert: "invalid", tolerance: "fit", start: function(event, ui){ $(this).draggable("option", "cursorAt", { left: Math.floor(ui.helper.width() / 2), top: Math.floor(ui.helper.height() / 2) }); } }); 

Using this, I get the cursor in the center only after the first drop. How can I center the cursor to the right of the first drop.

Jsfiddle

Answer 1

You can access the offset.click property for a draggable instance, which largely depends on the cursor setting for the option. The problem with setting the parameter is that, as you described, this will only apply the next time you fire the start event. But using the property, you can set it to the current event. Like this:

 start: function(event, ui){ $(this).draggable('instance').offset.click = { left: Math.floor(ui.helper.width() / 2), top: Math.floor(ui.helper.height() / 2) }; } 

https://jsfiddle.net/38fay00b/

Answer 2

I create this solution and it only works for me

 $('.soclass').mouseenter(function(){ $(this).draggable("option", "cursorAt", {top: 0, left: $(this).width()/2 }); });