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

Question

I want cursor to be in center for ui.helper of draggable .

I am doing this 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 cursor in the center only after First drop. How can I center align the cursor right from first drop.

Jsfiddle

Answer 1

You can access the offset.click property of the draggable instance, which is pretty much what setting the cursor at option does The problem with setting the option, is that as you describe it'll be applied only next time you trigger the start event. But using the property you can set it on 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/