Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap

Q1144 How can I drag and drop objects in both Netscape Navigator and Internet Explorer?

You are here: irt.org | FAQ | DHTML | Q1144 [ previous next ]

The following works in both Netscape Navigator 4+ and Internet Explorer 4+:

<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; }


<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">

<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">

<img src="image.gif" width="100" height="100" alt="An image that doesn't move">


Feedback on 'Q1144 How can I drag and drop objects in both Netscape Navigator and Internet Explorer?'

©2018 Martin Webb