Centering draggable to mouse pointer

7 posts, 0 answers
  1. Joao
    Joao avatar
    2 posts
    Member since:
    Oct 2011

    Posted 24 Oct 2011 Link to this post

    Hello,
    How do I center the draggable to the mouse pointer?
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 25 Oct 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. John Deary
    John Deary avatar
    1 posts
    Member since:
    Sep 2004

    Posted 20 Jan 2012 Link to this post

    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?
  5. Raymond
    Raymond avatar
    2 posts
    Member since:
    Jan 2012

    Posted 22 Jan 2012 Link to this post

    I can confirm that when using negative margins to get the item centered, the droptarget area is not functional anymore.
  6. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 23 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Tim
    Tim avatar
    3 posts
    Member since:
    Mar 2012

    Posted 25 Mar 2012 Link to this post

    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,
        })
      }      
    })
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 26 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready