Dragging from tree to div: how to obtain X/Y coordinates?

6 posts, 0 answers
  1. PeterS
    PeterS avatar
    5 posts
    Member since:
    Jan 2012

    Posted 17 Nov 2014 Link to this post

    In this AngularJS TreeView (see here) the user can drag a tree node and drop it in a div. I analyzed the drop event with console.log(e) however I cannot see the usual e.clientX/e.clientY or e.offsetX/e.offsetY to determine where in the div the node was dropped. Is it possible to obtain these coordinates?

    Thanks
    Pablo
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Nov 2014 Link to this post

    Hi,

    You need to initialize the drop target as Kendo UI DropTarget and use its drop event. Here is the example:

    http://dojo.telerik.com/ONabi

    Regards,
    Kiril Nikolov
    Telerik
     
    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. PeterS
    PeterS avatar
    5 posts
    Member since:
    Jan 2012

    Posted 19 Nov 2014 in reply to Kiril Nikolov Link to this post

    Thanks Kiril. 

    Your post works on Chrome and IE, unfortunately it doesn't work on FF (I get "undefined offsetX and  undefined offsetY").

    Also, is it possible not to have the "forbidden" icon when the node is dropped, and not have the node return to the tree?

    In my example I achieve that with:

    if (e.dropTarget.id=="dropHere")
                  e.setStatusClass("k-add");

    in the drag event, and with 

    e.preventDefault();

    in the drop event.


    Thanks
    Pablo

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 20 Nov 2014 Link to this post

    Hi,

    Please check the following example and let me know if it helps:

    http://dojo.telerik.com/ONabi/3

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. PeterS
    PeterS avatar
    5 posts
    Member since:
    Jan 2012

    Posted 21 Nov 2014 Link to this post

    Thanks Kiril, the drop event was missing, I added it to this dojo. Unfortunately this only works in Chrome; in IE10 and FF33 e.offsetX and e.offsetY return 'undefined'. I couldn't find any other coordinates I could take from the event. Any ideas?


    Thanks
    Pablo
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 25 Nov 2014 Link to this post

    Hello P,

    In IE10 you can use the originalEvent property. Here is an example:

    http://dojo.telerik.com/ONabi/6

    Regards,
    Kiril Nikolov
    Telerik
     
    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