文字をドラッグ&ドロップで移動する      
Sample
ここをクリックして新しいウインドウを開いてください。

ソース
<HTML>
<HEAD>
<TITLE>Java-Script</TITLE>

<SCRIPT Languge="JavaScript">
<!--
var target;
var evt_drag=0;
function evt_mousedown(){
  evt_drag=1;
  target=event.srcElement;
}
function evt_mousemove(){
 if (evt_drag){
   target.style.pixelTop=event.clientY-8;
   target.style.pixelLeft=event.clientX-8;
  }
}
function evt_mouseup(){
  evt_drag=0;
}
//-->
</SCRIPT>

</HEAD>
<BODY onmousemove="evt_mousemove()" onmouseup="evt_mouseup()" 
onmousedown="evt_mousedown()" bgcolor=white>
<div id="myimg1" style="position:absolute;top:70;left:50;font-size:50px;
cursor:hand">ま</div>
<div id="myimg2" style="position:absolute;top:70;left:100;font-size:50px;
cursor:hand">い</div>
<div id="myimg3" style="position:absolute;top:70;left:150;font-size:50px;
cursor:hand">ど</div>
<div id="myimg4" style="position:absolute;top:70;left:200;font-size:50px;
cursor:hand">!</div>
<div id="myimg5" style="position:absolute;top:70;left:300;font-size:50px;
cursor:hand">お</div>
<div id="myimg6" style="position:absolute;top:70;left:350;font-size:50px;
cursor:hand">い</div>
<div id="myimg7" style="position:absolute;top:70;left:400;font-size:50px;
cursor:hand">ど</div>
<div id="myimg8" style="position:absolute;top:70;left:450;font-size:50px;
cursor:hand">!</div>
<div id="myimg9" style="position:absolute;top:70;left:550;font-size:50px;
cursor:hand">6^^;</div>
<font color=blue><b>下の文字をドラッグ&ドロップで並べ替えてください。</b></font>
<br><br><br><br><br><br><br><br>
<FORM>
<INPUT TYPE=button VALUE="ウインドウを閉じる" onClick=window.close()>
</FORM>
<br><br>
</BODY>
</HTML>
ワンポイント解説
マウスの左ボタンが押された時に、フラグ evt_drag を 1 にしています。