【Javascript】クロスブラウザを制する 2-25 ドラッグレイヤー生成

[ update ]  2002.4.20 1.OperaのoffsetX,offsetYが不調のため手製で作成(かえってシンプルに．．．)。 [ update ]  2002.4.19 1.moveLAYERとzindexLAYERがオブジェクトで動作するタイプなので 今までの関数とのバッティングを避けるためにmoveLAYOJ,zindexLAYOJ に名前を変えました。 2.new dragLayを普通の変数ではなくdragLay['レイヤー名']へ代入 するように変更。これでオブジェクト名のバッティングを防ぐ ようにしました。)  --  下記は、draglay.jsのソースです。このスクリプトを直接 ページへ張り込んで使用しても良いですが、.js外部ファ イルとして    <script language="JavaScript" src="./drag/draglay.js"></script>  で呼び出して使うほうがシンプルですしバージョンアッ プ時にも管理が楽になります。 ただし、.jsファイルをサーバーへ置く場合はサーバー 側の設定が必要になります。(たとえばApacheなら .htaccessへ下記のTypeを書き加えます)  AddType application/x-javascript .js   使用するときは、たとえば、  dragLay['b0'] = new dragLay('b0',10,10,'<img src="./tr2.gif" border="0">')   と書けば、b0という名前でtr2.gif画像を乗せたドラッグ レイヤーが生成されます。   * 圧縮ファイル test.zip(9k) 


Source      /*********************************************************************    * クロスブラウザドラッグドロップのためのスクリプト    * dragLay 2002.4.14    * update  2002.4.20    *     * -------------------------------------------------------------------    * 言語 : JavaScript    * 対象Browser :     *     Win  n4 n6 moz e4 e5 e6 o6,    *     Mac  n4 n6 moz e4.5 e5,    *     Linux n4 n6 moz        * -------------------------------------------------------------------    * drag ホルダを適当な場所にコピーしたうえで    * <script language="JavaScript" src="./drag/draglay.js"></script>    * で呼び出してご利用ください。    *     *   書式:      *    dragLay['レイヤー名'] = new dragLay('レイヤー名',left,top,'html')     *     *   引数説明:    *     *   ・レイヤー名    ドラッグドロップするレイヤーの名前    *   ・left          レイヤーの初期left位置    *   ・top           レイヤーの初期top位置    *   ・html          レイヤーの中へ表示するhtml    *     *   使用例:    *     *   dragLay['b0'] = new dragLay('b0',10,10,'<img src="./tr2.gif" border="0">')     *     * -------------------------------------------------------------------    * Toshirou Takahshi tato@fureai.or.jp    * Support http://game.gr.jp/js/    * 改造は自由ですがバグやブラウザのバ?ジョンアップへの対応等の    * 情報には充分注意してご利用ください。    *     */    /*--/////////////ここから下はさわらなくても動きます/////////////--*/    function dragLay(layName,x,y,html){     this.id      = layName   // ドラッグできるようにするレイヤー名     this.x       = x         // 初期left位置     this.y       = y         // 初期top位置     if(document.layers)      //n4用       this.div='<layer name="'+layName+'" left="'+x+'" top="'+y+'">?n'               +'<a     href="javascript:void(0)" ?n'               +'       onmousedown="clickElement=?''+layName                                     +'?';mdown(event);return false">?n'               + html + '</a></layer>?n'     else                     //n4以外用       this.div='<div  id="'+layName+'" class="dragLays"?n'               +'      onmousedown="clickElement=?''+layName                                     +'?';mdown(event);return false"?n'               +'      style="position:absolute;left:'+x+'px;top:'+y+'px">?n'               + html + '</div>?n'     document.write(this.div)     return    }   dragLay.prototype.moveLAYOJ = moveLAYOJ //メソッドを追加する   //--レイヤー移動   function moveLAYOJ(oj,x,y){     if(document.getElementById){  //e5,e6,n6,m1,o6用       oj.left = x       oj.top  = y     } else if(document.all){      //e4用       oj.pixelLeft = x       oj.pixelTop  = y     } else if(document.layers)    //n4用       oj.moveTo(x,y)   }    //--layNameで指定したオブジェクトを返す(必ずonload後に実行すること)   function getLayOj(layName){       if(document.getElementById)        return document.getElementById(layName)           //e5,e6,n6,m1,o6用     else if(document.all)   return document.all(layName)    //e4用     else if(document.layers)return document.layers[layName] //n4用   }    //--奥行きZ座標set    function zindexLAYOJ(oj,zindex){     if(document.getElementById) oj.zIndex=zindex  //n6,m1,e5,e6,o6用     else if(document.all)       oj.zIndex=zindex  //e4用     else if(document.layers)    oj.zIndex=zindex  //n4用   }    //--イベントキャプチャー開始   document.onmousemove = mmove   document.onmouseup = mup   if(navigator.userAgent.indexOf('Gecko')!=-1)   //m1,n6用     document.onmousedown = mdown   if(document.layers){                           //n4用     document.captureEvents(Event.MOUSEMOVE)     document.captureEvents(Event.MOUSEUP)   }    //--マウスX座標get    function getMouseX(e){     if(window.opera)                            //o6用         return e.clientX     else if(document.all)                       //e4,e5,e6用         return document.body.scrollLeft+event.clientX     else if(document.layers||document.getElementById)         return e.pageX                          //n4,n6,m1用   }    //--マウスY座標get    function getMouseY(e){     if(window.opera)                            //o6用         return e.clientY     else if(document.all)                       //e4,e5,e6用         return document.body.scrollTop+event.clientY     else if(document.layers||document.getElementById)         return e.pageY                          //n4,n6,m1用   }    //--レイヤ?左辺X座標get    function getLEFT(layName){     if(document.all)                            //e4,e5,e6,o6用
      return document.all(layName).style.pixelLeft
    else if(document.getElementById)            //n6,m1用
      return (document.getElementById(layName).style.left!="")
              ?parseInt(document.getElementById(layName).style.left):""
    else if(document.layers)                    //n4用
      return document.layers[layName].left 
  }

  //--レイヤ?上辺Y座標get 
  function getTOP(layName){
    if(document.all)                          //e4,e5,e6,o6用
      return document.all(layName).style.pixelTop
    else if(document.getElementById)          //n6,m1用
      return (document.getElementById(layName).style.top!="")
              ?parseInt(document.getElementById(layName).style.top):""
    else if(document.layers)                  //n4用
      return document.layers[layName].top 
  }

  //--マウスカーソルを動かした時レイヤーもmoveLAYOJで動かす
  function mmove(e) {
    if(!window.clickElement) return
    if (getLayOj(clickElement)) {
       movetoX = getMouseX(e) - offsetX
       movetoY = getMouseY(e) - offsetY

       var oj=(!!document.layers)?getLayOj(clickElement)
                                 :getLayOj(clickElement).style
      dragLay[clickElement].moveLAYOJ(oj,movetoX,movetoY)
      return false
    }
  }

  //--マウスボタンを押し下げた時
  //  レイヤー内のカーソルoffset位置取得
  function mdown(e) {
    if(navigator.userAgent.indexOf('Gecko')!=-1)   //n6,m1用
      if(e.currentTarget.className != 'dragLays') return
      else clickElement = e.currentTarget.id
    var selLay = getLayOj(clickElement)
    if (selLay){
        offsetX = getMouseX(e) - getLEFT(selLay.id)
        offsetY = getMouseY(e) - getTOP(selLay.id)
    }
    return false
  }

  //--マウスボタンを上げた時ドラッグ解除
  var zcount = 0
  function mup(e) {
    if(!window.clickElement) return
    if (getLayOj(clickElement)) {
      zindexLAYOJ((!!document.layers)?getLayOj(clickElement)
                     :getLayOj(clickElement).style,zcount++)
      clickElement=null
    }
  }
  /*--/////////////ここまで///////////////////////////////////////--*/