6

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

Amar Singh
  • 5,464
  • 2
  • 26
  • 55

2 Answers2

19

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/

Lonergan6275
  • 1,938
  • 6
  • 32
  • 63
Julien Grégoire
  • 16,864
  • 4
  • 32
  • 57
  • Yea thanks that worked ,,, Can you please explain the instance concept – Amar Singh Jan 18 '16 at 10:15
  • 1
    Instance is a method that gives access to the data of a specific draggable. When you assign draggable, it in fact creates a draggable object that takes care of all the behaviors and callback. All the methods and properties available such as start, cursorAt and more are part of that object. – Julien Grégoire Jan 18 '16 at 13:47
  • Works like a charm. – Noel Baron Nov 28 '17 at 14:31
-1

I create this solution and this only works for me 

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