HTML5: dragover(), drop(): how get current x,y coordinates?

Posted by Pete Alvin on Stack Overflow See other posts from Stack Overflow or by Pete Alvin
Published on 2010-03-13T12:34:24Z Indexed on 2010/03/13 12:35 UTC
Read the original article Hit count: 280

Filed under:

html5

|

drag-and-drop

How does one determine the (x,y) coordinates while dragging "dragover" and after the drop ("drop") in HTML5 DnD?

I found a webpage that describes x,y for dragover (look at e.offsetX and e.layerX to see if set for various browsers but for the life of me they ARE NOT set).

What do you use for the drop(e) function to find out WHERE in the current drop target it was actually dropped?

I'm writing an online circuit design app and my drop target is large.

Do I need to drop down to mouse-level to find out x,y or does HTML5 provided a higher level abstraction?

© Stack Overflow or respective owner

Related posts about html5

Is there a HTML5 Validator plugin for Firefox?

as seen on Super User - Search for 'Super User'
Is there a plugin for firefox to validate HTML 5? I've always used this but if my webpage has a <!DOCTYPE HTML> doctype it complains about it not having a doctype at all. >>> More
HTML5 video tag in chrome - wmv

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi Al, I need to make a page which displays a video. Firefox and and Opera support the OGG format, no problem there. Chrome is ... "stupid" and does not recognize OGG. Does Chrome on Windows know how to handle WMV? I already have them encoded, and no I cannot recode new videos since the media is… >>> More
HTML5 cache manifest: whitelisting ALL remote resources?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm doing an iPhone version of a desktop site that includes a blog. The blog often embeds images from other domains (the image URLs always start with http:// in this case, obviously), but because I'm using cache-manifest, these images don't load because they aren't declared in the manifest file. I… >>> More
Learning HTML5 - Sample Sites

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Part of the challenge with HTML5 is understanding the range of different technologies and finding good samples. The following are some of the sites I have found most useful. IE TestDrive http://ie.microsoft.com/testdrive/ A good set of demos using touch, appcache, IndexDB, etc… >>> More
Online video tutorials for HTML 5

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Here are some of the best introductory HTML5 videos I have found online/for free. Mix 2011: HTML5 for Skeptics - Scott Stansfield channel9.msdn.com/Events/MIX/MIX11/EXT21 Filling the HTML5 Gaps with Polyfills and Shims - Ray Bango channel9.msdn.com/Events/MIX/MIX11/HTM04 50 Performance… >>> More

Related posts about drag-and-drop

Implementing Drag and Drop Functionality WebBrowser Control Winforms C#

as seen on Stack Overflow - Search for 'Stack Overflow'
I need to capture drag and Drop Events of WebBrowser Control in WinForm C#. Is there any way ? >>> More
Drag and drop with an image

as seen on Stack Overflow - Search for 'Stack Overflow'
I need to create a drag and drop system in swing where an image of the thing being dragged is attached to the cursor during the drag. In theory this is achieveable with public Icon getVisualRepresentation(Transferable t) but there appears to be a long standing bug (here) that means this method… >>> More
jQuery table drag and drop plugin within iFrame

as seen on Stack Overflow - Search for 'Stack Overflow'
I am using the latest version (0.5) of Table Drag and Drop plugin (http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/) for jQuery. I have a problem when the table with the draggable rows is inside an iframe. When I drag a row and take it to the top, the page will not scroll (even after… >>> More
How to set a target as image [on hold]

as seen on Game Development - Search for 'Game Development'
How to set a target as image in given code. public void addListenerForImage(final Image roomImage) { final DragAndDrop dragAndDrop = new DragAndDrop(); dragAndDrop.addSource(new DragAndDrop.Source(roomImage) { public DragAndDrop.Payload dragStart (InputEvent… >>> More
Drag and Drop in MVVM with ScatterView

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to implement drag and drop functionality in a Surface Application that is built using the MVVM pattern. I'm struggling to come up with a means to implement this while adhering to the MVVM pattern. Though I'm trying to do this within a Surface Application I think the solution is general… >>> More