Centering draggable to mouse pointer

[Joao]

Hello,
How do I center the draggable to the mouse pointer?

[Dimo]

Hi Joao,

If you use the following demo as a starting point...

http://demos.kendoui.com/web/dragdrop/index.html

...you need to add negative top and left margin to the draggable element, for example:

$("#draggable").kendoDraggable({
    hint: function() {
        return $("#draggable").clone().css({marginLeft: "-40px", marginTop: "-40px"});
    }
});

40px is half of the draggable element's width and height. You can also calculate this on the fly, if you don't want to hard-code it, or you don't know it beforehand.

All the best,
Dimo
the Telerik team

[John Deary]

I tried this, but it seems to prevent the drop target from getting the drop event,

I determined that this was because you are dropping onto your hint now, if it is under the mouse.

Thoughts?

[Raymond]

I can confirm that when using negative margins to get the item centered, the droptarget area is not functional anymore.

[Dimo]

Hello,

That's right. After some additional testing, it turned out this scenario cannot be supported, as the required mouse events are not fired.

Regards,
Dimo
the Telerik team

[Tim]

I found success with this...

$('#foo').kendoDraggable({

  cursorOffset: {

    top: -($('#foo').height() / 2),

    left: -($('#foo').width() / 2)

  },     

  ...

})

$('body').kendoDropTarget({

  drop: function (e) {

    top_offset = -($('#foo').height() / 2),

    left_offset = -($('#foo').width() / 2)

    $('#foo').offset({

      top: e.clientY + top_offset,

      left: e.clientX + left_offset,

    })

  }      

})

[Petyo]

Hello,

I just wanted to mention that positioning the hint below the mouse is supported (and is, in fact, the default behavior) since Q1 2012. Check this demo for details.
Kind regards,
Petyo
the Telerik team