4umi.com/web/javascript/draggable

Drag-a-tag

Dynamic Javascript

spade
heart
diamond
club

The four images above are placed inside absolutely positioned div elements and can be moved with the mouse. Drag and drop them anywhere you like. It won't work with this image  A relatively positioned image. as it is not positioned in any way, but inside a normal paragraph.

The HTML

The images may be wrapped in <div> tags as shown below, which have been adorned with the position:absolute style. This attribute may also be applied to the images directly.

<div id="s" style="position:absolute;z-index:2;left:310px;top:30px;">
<img src="/image/clip/c-spade.gif" alt="spade" width="13" height="11"/>
</div>
<div id="h" style="position:absolute;z-index:2;left:330px;top:55px;">
<img src="/image/clip/c-heart.gif" alt="heart" width="13" height="11"/>
</div>
<div id="d" style="position:absolute;z-index:2;left:400px;top:30px;">
<img src="/image/clip/c-diamond.gif" alt="diamond" width="13" height="11"/>
</div>
<div id="c" style="position:absolute;z-index:2;left:350px;top:45px;">
<img src="/image/clip/c-club.gif" alt="club" width="13" height="11"/>
</div>

The script

The responsible script is old (it even supports Netscape 4) and wise:

function MD(e) {
  if(N) {
    ob = window.document.layers[e.target.name];
    X = e.x;
    Y = e.y;
    return false;
  } else {
    ob = window.event.srcElement.parentNode;
    if(ob) {
      ob = ob.style;
      X = window.event.offsetX;
      Y = window.event.offsetY;
    }
  }
}
function MM(e) {
  if(ob) {
    if(N) {
      ob.moveTo( e.pageX - X, e.pageY - Y );
    } else {
      ob.pixelLeft = window.event.clientX - X + document.body.scrollLeft - 2;
      ob.pixelTop = window.event.clientY - Y + document.body.scrollTop - 2;
      return false;
    }
  }
}
function MU() {
  ob = null;
}

var ob, X, Y, N = (document.layers) ? 1 : 0;

if(N) {
  document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP);
}

document.onmousedown=MD;
document.onmousemove=MM;
document.onmouseup=MU;