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

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

以下のimg、span、button、hr、h3、input、marquee、fieldset各要素をマウスドラッグで移動できます。　

H3だ！

SPANだ！

マーキーだす(ドラッグしてネ！)

注意 ●ドラッグするHTML要素にはposition:absoluteを設定すること。
●タグ名は大文字でないと認識されない。
  * if(el.tagName == "img")で"は無効、IMGを使うこと。
●event.returnValue = false;を設定しないとうまくドラッグできない。
●<table>タグはドラッグが効かない。
●event.xとevent.yは、documentの現在画面表示されている左上からの座標を表す。それに対しposLeftとposTopはdocumentの(画面に表示されている、されていないに関係なく)左上を原点にする。そこでスクロールした場合、スクロール量を調整しないと正確に配置できない。document.body.scrollLeftとdocument.body.scrollTopで調整する。
●posLeftとposTopはleftプロパティ、topプロパティを使っても同じこと。

　

　

　

　

　

　

　

　

　

　

　

　

　

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

<script language="JavaScript"><!--
 var el = null;        //ﾄﾞﾗｯｸﾞする対象要素
 function Drag(){
   var posx = event.x;    //現在のﾏｳｽX座標
   var posy = event.y; //現在のﾏｳｽY座標
   var bton = event.button; //押されたﾏｳｽﾎﾞﾀﾝ(1は左ﾎﾞﾀﾝ)
   if(bt == 1){        //左ﾎﾞﾀﾝが押された場合
     if(el == null)el = event.srcElement;//ｸﾘｯｸされた要素
     //以下でﾄﾞﾗｯｸﾞできる対象を限定している
     if(el.tagName=="IMG"||el.tagName=="SPAN"||
       el.tagName=="BUTTON"||el.tagName=="HR"||  
       el.id=="hh"||el.id=="mq"||el.name=="txt"||
       el.className=="info"){
       el.style.posLeft = posx-el.style.pixelWidth/2+document.body.scrollLeft;
       el.style.posTop = posy-el.style.pixelHeight/2+document.body.scrollTop;
     }
   }
   if(bton != 1)el = null; //左ﾎﾞﾀﾝでない場合
 
   event.returnValue = false;//ｲﾍﾞﾝﾄの標準動作を無効する
   event.cancelBubble = true;
   //このｲﾍﾞﾝﾄがｲﾍﾞﾝﾄ階層を浮上(bubble up)するのを停止
 }
 
 document.onmousemove = Drag;
 
 var h,m,s,ht,mt,st;
 function TimeView(){    //ﾎﾞﾀﾝに時刻を表示
     nowDate=new Date();
     h=nowDate.getHours();    //時の取得
         ht=h + ":";
     m=nowDate.getMinutes();    //分の取得
         if(m<10){mt="0" + m +  ":";}
         else{mt=m + ":";}
     s=nowDate.getSeconds();    //秒の取得
         if(s<10){st="0" + s;}
         else{st=s + " ";}
     nowTime = ht + mt + st;
     bt.innerText = "<button>ﾀｸﾞに時刻表示："+nowTime;
 }
 //--></script>
 </head>
 
 <body onload="setInterval('TimeView()',1000);">
 
 <img style="position:absolute;top:100;left:50;"       
     src="../../images/bt0709.gif" width="28"  height="28">
 <img style="position:absolute;top:110;left:120;" 
     src="../../java/jadata/ico_213.gif" width="28"  height="16">
 
 <button id="bt" 
     style="position:absolute;top:150;left:10;
     width:400px;cursor:hand;background-color:pink;
     font:bold 14pt"></button>
 
 <hr style="position:absolute;top:200;left:30;
     width:70%;height:10px;cursor:
     hand;background-color:green;">
 
 <h3 id="hh" 
     style="position:absolute;top:220;left:50;width:60px;
         cursor:hand;background-color:yellow;">H3だ！</h3>
 
 <input type="text" name="txt" value="Textﾎﾞｯｸｽ"
     style="position:absolute;top:220;left:140;
     width:80;cursor:hand;" size="20"> 
 
 <span id="sp" style="position:absolute;top:220;
     left:250;width:120px;cursor:hand;background-color:cyan;
     font:bold 14pt">SPANだ！</span> 
 
 <marquee id="mq" style="position:absolute;top:250;left:30;
         width:70%;cursor:hand;"
     behavior="alternate" bgcolor="#00FF00"  border="1">
     ﾏｰｷｰだす(ﾄﾞﾗｯｸﾞしてﾈ！)</marquee>
 
 <fieldset class="info"       style="position:absolute;top:280;left:10;
         width:90%;height:100;cursor:hand;">
 ･･･(省略)･･･
 </fieldset></p>

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