You are here: irt.org | FAQ | DHTML | Q1144 [ previous next ]
The following works in both Netscape Navigator 4+ and Internet Explorer 4+:
<html>
<head>
<title>Drag and Drop</title>
<script language="JavaScript">
var x=y=o=null;
if (document.layers) {
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
window.onmousedown=down, window.onmouseup=up, window.onmousemove=move;
}
else if (document.all)
document.onmousedown=down, document.onmouseup=up, document.onmousemove=move;
function down(e) {
if (document.all && window.event.srcElement.parentElement)
o=window.event.srcElement.parentElement, x=window.event.offsetX, y=window.event.offsetY;
else {
if (document.layers) {
if (document.layers['o'+e.target.name]) {
o=document.layers['o'+e.target.name], x=e.layerX, y=e.layerY;
}
else return true;
}
}
return false;
}
function move(e) {
if (document.all && o)
o.style.posLeft=window.event.clientX-x, o.style.posTop=window.event.clientY-y;
else if (document.layers && o)
o.left=e.pageX-x, o.top=e.pageY-y;
return false;
}
function up() { o=null; }
//--></script>
</head>
<body>
<span id="o0" style="position:absolute; left:0; top:0; width:50;">
<img src="image.gif" name="0" width="50" height="50" alt="An image in a span">
</span>
<div id="o1" style="position:absolute; left:100; top:100; width:75;">
<img src="image.gif" name="1" width="75" height="75" alt="An image in a div">
</div>
<img src="image.gif" width="100" height="100" alt="An image that doesn't move">
</body>
</html>