サンプルソース
<HTML>
<HEAD>
<TITLE>ドラッグして画像を移動する。複数画像 Mozilla Firefox対応</TITLE>
<SCRIPT language="JavaScript">
<!--
var flag = false;
var z_flag = false;
var dx,dy,X,Y,IDname,index_value;
window.document.onmousemove = move_Ly; //マウスが移動した時のイベントハンドラ move_Lyを実行
window.document.onmouseup = move_off; //マウスのボタンを離したとき move_off()を実行
//マウスで画像を押した時
function mouse_D(event,v){
if(z_flag == true){document.all[IDname].style.zIndex=index_value;}
flag = true;
//マウスカーソルの画面上の座標(位置)を取得
if(document.all){
dx = window.event.offsetX; // offsetXはマウスポインタの要素上のX座標
dy = window.event.offsetY; // offsetYはマウスポインタの要素上のY座標
}
else if(document.layers || document.getElementById){
dx=event.layerX;
dy=event.layerY;
}
IDname=v;
index_value=document.all[IDname].style.zIndex;
document.all[IDname].style.zIndex =4;
}
//マウスカーソルの画面上の座標(位置)を取得
function mouseXY(event){
//マウスX位置取得
if(document.all)
{X=document.body.scrollLeft+window.event.clientX;}
else if(document.layers || document.getElementById){X=event.pageX;}
//マウスY位置取得
if(document.all)
{Y=document.body.scrollTop+window.event.clientY;}
else if(document.layers || document.getElementById){Y= event.pageY;}
}
//マウスが移動した時
function move_Ly(event){
if (flag==false) return;
mouseXY(event);//alert(IDname);
document.getElementById(IDname).style.left = X - dx;
document.getElementById(IDname).style.top = Y - dy;
return false;
}
//マウスのボタンを離したとき
function move_off(){flag = false;z_flag = true;}
// -->
</script>
</HEAD>
<body>
<DIV id="IMG1" style="position:absolute;
top : 180px;
left : 100px;
width : 64px;
height : 56px;
z-index : 1;
cursor : move;" onmousedown="mouse_D(event,'IMG1');return false">
<IMG src="画像のURL" ></DIV>
<DIV id="IMG2" style="position:absolute;
top : 236px;
left : 156px;
width : 64px;
height : 56px;
z-index : 2;
cursor : move;" onmousedown="mouse_D(event,'IMG2');return false">
<IMG src="画像のURL" ></DIV>
<DIV id="IMG3" style="position:absolute;
top : 285px;
left : 210px;
width : 64px;
height : 56px;
z-index : 3;
cursor : move;" onmousedown="mouse_D(event,'IMG3');return false">
<IMG src="画像のURL" border="0" width="64" height="56"></DIV>
</body></HTML>
ひとこと、二言
//イベントとは、マウスのボタンを押した(onmousedown)、マウスを動かした(onmousemove)などブラウザ上で行うさまざまな動作をした事象（event）のことです。、
//イベントが発生したときに行う処理を与えるための記述。これを、イベントハンドラと呼びます。
画像のURLの所は御自分の画像のURLをいれてください。
position:absolute;top : *****px;left : *****px; //画像の画面の上から、左からの位置です
top : ***px; left : ***px; の数値を変更することで画像の配置を変えることができます。
z-index : 1; //数値が小さいほど奥に大きいほど手前にオブジェクトが配置されます。
index_value=document.all[IDname].style.zIndex;//マウスのボタンを押した画像（正確にはレイヤー）のz-index値 z-indexの値を元に戻すため使用します。
document.all[IDname].style.zIndex =4;//z-index値を最大にして一番手前に表示します。このソースの場合 ３までz-index値があるので
４に設定します。
document.all[IDname].style.zIndex=index_value;//onmousedown で変更したz-index値を既定値に戻します。
ソースの詳細はこちらを参照してください。
マウスカーソル画面上の座標(位置)を検出するスクリプト
オブジェクトの左上を基点としたマウスのX座標、Y座標の取得
画像の重なり順序を変えます。z-index
