Canvas
Move/drag
Solid/rand.

Drag and Drop Test Program

Canvas is position relative, border 1px, in a div that is position relative, border 10px.

This box is position relative, border 10px, zIndex 1, float left. Can be moved.

Drop Before is position relative, border 10px. Small boxes and Container are float left.

Output fields are float left and containers are float left. Fire list out field is a textarea.

Drop In small boxes are float left, border 4px.

*scrollX and scrollY are window.scrollX and window.scrollY.

Drop Before
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
atributes
screenX
screenY
pageX
pageY
clientX
clientY
layerX
layerY
x
y
offsetX
offsetY
scrollX*
scrollY*
scrollLeft
scrollTop
scrollWidth
scrollHeight
clientLeft
clientTop
clientWidth
clientHeight
offsetLeft
offsetTop
offsetWidth
offsetHeight
ctrlKey
shiftKey
altKey
cancelable
bubbles
defaultPrevented
detail
eventPhase
target
currentTarget
relatedTarget
type
which
event
count
target.id
click
menu
dblclick
mousedown
mousemove
mouseup
mouseenter
mouseleave
mouseover
mouseout
dragstart
dragenter
dragover
dragleave
drag
dragend
drop
fire list
Drop In
7
6
5
4
3
3
2
2
1
1
1
1
1
1
1
1
1
T
T
T
D
U
B
NO