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

[Pablo]

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

[Kiril Nikolov]

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

 

 

[Pablo]

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

[Kiril Nikolov]

Hi,

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

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

Regards,
Kiril Nikolov
Telerik

 

 

[Pablo]

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

[Kiril Nikolov]

Hello P,

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

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

Regards,
Kiril Nikolov
Telerik