0

I am new on HTML5 looking to drop element on a canvas/div at mouse position when mouse button released.

I used appendChild to add element on target and it drops at the starting position of the DIV, is the problem.

HTML5: dragover(), drop(): how get current x,y coordinates? I found this but it has no code to add element on particular position.

Community
  • 1
  • 1
Sarang Damkondwar
  • 184
  • 1
  • 10
  • http://stackoverflow.com/questions/2438320/html5-dragover-drop-how-get-current-x-y-coordinates I found this but it has no code to add element on particular position. – Sarang Damkondwar Apr 09 '15 at 12:24
  • 1
    You can drop an element, get mouse position and the element dropped, but you cannot append DOM elements to a canvas. Canvas is like an image (just "writable"). –  Apr 09 '15 at 14:18

1 Answers1

1

As far as I understood your question, you want to determine the relative position of cursor over the element when drop event occurs. If so, the position of cursor over the block element can be calculated the next way:

+--- body --------
|
|
|    +-- div ---
|    |   
|    |      x

x - is the cursor

  • Determination of cursor position from drop event
  • Determination of <div> position on the page (top left corner)
  • cursorX - divX = X position (relative to <div>)
  • cursorY - divY = Y position (relative to <div>)

! Note, that you can't add DOM nodes to <canvas>.

Paul T. Rawkeen
  • 3,994
  • 3
  • 35
  • 51