HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

HTML要素のドラッグ移動　(1)

四角形をドラッグ移動できます。

ドラッグしてネ！

　　

　　

Sample Source......................................................................>>>

<script language="JavaScript"><!--
 document.body.onmousemove = DivDrag;
 
 var flg = 0;
 var x1,x2,y1,y2;
 function DivDown(){ //div要素をmousedownした時
     flg = 1;
     x1 = event.x;      //mousedown位置のxy座標を取得
     y1 = event.y;
 }
 function DivDrag(){    //mousemoveした時
     if(flg == 1){
         x2 = event.x;//mousemove時点のxy座標を取得
         y2 = event.y;
         //div要素を移動さすが、移動量は(x2-x1)、(y2-y1)
         dv.style.pixelLeft  += x2 - x1;
         dv.style.pixelTop  += y2 - y1;
         //次の移動のため、x2,y2をx1,y1にする
         x1 = x2;
         y1 = y2;
     }
 }
 </script>
 </head>
 
 <body onmouseup="flg=0">
 <div id="dv" style="position:absolute;top:100;left:100;
     width:100;height:50;background-color:navy;
     border:thin solid pink;cursor:hand;"
     onmousedown="DivDown();"  onmouseup="flg=0">
 </div>

end(最終更新:12/11/12)