Back to Scripts

Javascript, How to make a Dress Up Game (Drag and Drop)

A lot of doll maker sites uses this script to make their doll pieces draggable. This version would work on BOTH ie and netscape (original script by DynamicDrive)

Just add the field (i.e. class="dragme") to make an image draggable is all that is required. The z order of the images is determined by which image is created last (the last image will be the top most image)

Below we set the three images placed inside a table (could just as well be a div) and assigned the classname "dragme" to each of them

Try dragging the smileys below (Tested on on IE4+, Netscape6+ (NS6) and Firefox for Windows)

To enable drag and drop for your images just include (copy and paste) the javascript source below in your HTML document inside the HEAD tags <head> .and </head> section.

Javascript Source

<style>
<!--
.dragme{position:relative;}
-->
</style>
<script language="JavaScript1.2">
<!--

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}

function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

//-->
</script>

Which the class="dragme" to whichever image you wish to make draggable
See below:
..
<img src="images/AIM_smiley.gif" class="dragme"> ..

References:
Dynamic Drive: For the original script

All work by eLouai is licensed under a Creative Commons Attribution 3.0 Unported License