CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-ui-draggable
Amar Singh
Amar Singh

Reputation: 5622

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

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

Upvotes: 6

Views: 7280

Answers (2)

Julien Grégoire
Julien Grégoire

Reputation: 17144

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/

Upvotes: 19

Piotr Kazuś
Piotr Kazuś

Reputation: 344

I create this solution and this only works for me 

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

Upvotes: -1

Related Questions