Dragging and Dropping in the Internet Explorer

Mouse Events

 


document.onmousedown
document.onmousemove
document.onmouseup
document.onmousemove
document.onclick
(no doubleclick for macs)
onClick = you can use this for the button object, checkbox object, document object, link object, radio, reset, submit objects

onDragDrop

onMouseMove

onMouseOut

onMouseOver

onMouseDown

onMouseUp

To catch mouse event sin IE4 you connect the mouse handlers in the <body> element, not the <script> element.

example:

<body onMouseDown="myFunction()".....>

Then, use the window.event properties.....

example: window.event.x = where the mouse button was clicked, horizontally

altKey true of alt key is down
button

specifies which mouse button, if any, is pressed

canceBubble indicates if this event should move up the event heirarchy
clientX x coordinate with respect to the client area
clientY y coordinate with respect to the client area
ctrKey true if ctrl key was down
fromElement specifies element being moved
keyCode code of struck key
offsetX offset between where user clicked, and the edge of the layer, horizontally
offsetY offset between where user clicked, and the edge of the layer, vertically
reason reason of data transfer
returnValue specifies the return value of from the event
screenX x coordinate relative to physical screen size
screenY y coordinate relative to physical screen size
shiftKey true if shift key was down
srcElement element that caused the event
srcFilter filter event if this is a filterChange event
toElement specifies element being moved to
type returns event type as a string
x x position of the event in context
y y position of the event in context

 

<SCRIPT LANGUAGE = "JavaScript">

function moveImage()
{

if(window.event.button != 1){
return
}

with(window.event.srcElement.style){

left = window.event.x - 236 / 2 - document.all.ImageDiv.offsetLeft

top = window.event.y - 118 / 2 - document.all.ImageDiv.offsetTop

}

window.event.returnValue = false
}

</SCRIPT>

with(window.event.srcElement.style){
this "with" is something I use in vb alot -- you can use it with javascript, too. (alternate to dotnotation)
and it's equvalent to saying: window.event.srcElement.style.left =

 

next we find out where to put our layer, in relation to our mouse:

window.event.x (where the mouse is now)
236 / 2 -- the horizontal center of our layer
document.all.ImageDiv.offsetLeft -- the edge of the layer, compared to where our mouse is.

so: where our mouse is - center of our layer - where the edge of the layer is -- That's what that line of code does.