title_parttitle_parttitle_part
静岡県浜松市であれこれソフトを開発している A.K.I Software のブログです。日々の開発日記やサーバー・セキュリティ関連の話題なども掲載。
Java Script による Drag&Drop Sample
[移動中]
ドラッグしてください1
ドラッグしてください1
ここはできませんよ
ドラッグしてください2ここはできませんよ






ボタンの1〜4は反応しますが、ボタン5にドロップしても反応はしません。
これは、1〜4の onMouseOver / onMouseOut に指定されている処理でドロップ対象の指定・解除を行っている為です。
ドロップ元メールID
移動先メールボックス

Java Script のソースコードです。
<script type="text/javascript">
<!--
var offsetX;
var offsetY;
var obj; //ドラッグオブジェクト
var mbox; //マウスカーソルに追従する div オブジェクト
var tarbox; //ドロップ先を識別する為の string

//IEかどうか適当な判定(^-^;
function isIE()
{
  if (document.all) {
    return 1; //IE です。
  } else {
    if (document.getElementsByTagName) {
      return 2; //IE以外です。
    } else {
      return 0; //不明です。
    }
  }
}

function getscrollLen()
{
  var pos = new Object(); 
  pos.x = document.documentElement.scrollLeft || document.body.scrollLeft; 
  pos.y = document.documentElement.scrollTop || document.body.scrollTop; 
  return pos; 
}

onload=function ()
{
  switch ( isIE() ) {
    case 0:
      return;
      break;  //分からないので止める。(^-^;
    case 1:
      objs = document.all.tags("td");//IE用にタグ取得
      break; 
    case 2:
      objs = document.getElementsByTagName("td");//IE以外用のタグ取得
      
  }
  //ドラッグ元になるタグがテーブル内の TD ですので、上記では TD を取得していますが
  //これを DIV にしたりすれば任意のオブジェクトに変更することができます。
  
  //オブジェクト(エレメント)のリストより、ID に "MAILID" が含まれているタグのみ oMouseDown をセットします。
  //これはドラッグ元を識別する為の処理です。
  for (i=0; i<objs.length; i++)
  {
    if (objs[i].id.indexOf("MAILID") != -1) {
      objs[i].onmousedown = onMouseDown;
    }
  }
  //ドキュメント全体に onMouseMove / OnMouseUp を設定します。
  document.onmousemove = onMouseMove;
  document.onmouseup = onMouseUp;
}

function onMouseDown(el)
{
  //クリックした際にドロップ先指定を初期化します。
  //これはドロップ先のボタンにマウスカーソルを当てた場合にもセットされる為です。
  //マウスを離した際にのみセットをしたい為、このような処理を行っています。
  tarbox = "";
  document.mailddform.MOVEBOXNAME.value = "";

  //マウス追従用の div オブジェクトを取得します。
  mbox = document.getElementById("miconid");
  //クロスブラウザ用に、ドラッグしたオブジェクトを確保します。
  obj = this;

  if (mbox) {
    //マウスカーソルの形状を変更。
    document.body.style.cursor = "crosshair"; 
    //追従用の div を表示。
    mbox.style.visibility = "visible";
    
    //以下は無くても良いのですが、クリックした時点で追従用の div 位置をマウス位置に設定します。
    switch ( isIE() )
    {
      case 0: return true; break;
      case 1: offsetX = event.offsetX + 10; offsetY = event.offsetY + 3; break;
      case 2: offsetX = el.pageX+10; offsetY = el.pageY+3; break;
    }
    //Firefox では数値を直接入れてもパースがどうこうエラーがでますので、"px" を追加し、pixel と識別させます。
    mbox.style.left = offsetX + "px";
    mbox.style.top = offsetY + "px";
  }
  return false;
}

function onMouseMove(el)
{
  //mbox が存在する場合は、マウスカーソルに mbox (追従用 div)をくっつけて移動させます。
  //上にもありますが、3 とか 10 はずらすための数値です。マジックナンバーは良くないので
  //変数で定義した方が良いと思います。
  if (mbox) {
    switch ( isIE() )
    {
      case 0: break;
      case 1:
        mbox.style.left = event.clientX + 10 + getscrollLen().x;
        mbox.style.top = event.clientY + 3 + getscrollLen().y;
        break;
      case 2:
        mbox.style.left = el.pageX + 10 +"px";
        mbox.style.top = el.pageY + 3 +"px";
        break;
    }
    return false;
  } else {
    return true;
  }
}

function onMouseUp(el)
{
  //カーソルを戻します。
  document.body.style.cursor = "auto";
  if (mbox && obj) {
    if (tarbox!="") {
      //substring を利用して必要な情報を取り出します。
      //ドラッグ元の ID を識別させる為のキーとデータをセットにしている訳です。
      //ドラッグ元に value で値を持てる物を利用している場合はそちらを利用すれば良いですが、無い場合は
      //このような方法で処理を行っています。
      document.mailddform.MAILID.value = obj.id.substring(6,obj.id.length); (*1)
    }
    //追従用 div を消して、他のオブジェクト等を初期化します。
    mbox.style.visibility = "hidden";
    mbox = null;
    obj = null;
    tarbox="";
  }
}

function onBoxName(mmbox)
{
  tarbox = mmbox;
  document.mailddform.MOVEBOXNAME.value = mmbox;
}

function onBoxOut()
{
  tarbox = "";
  document.mailddform.MOVEBOXNAME.value = "";
}

-->
</script>

おまけコード
下記のコードを利用した場合、onBoxName() / onBoxOut() を利用しなくともドロップ先を取得することができます。(*1 の部分と差し替え)
ただし、getBoundingClientRect() に対応していないバージョン(Webkit を利用している、Google Chrome 1.0.154.53 など)では動きません。

  switch ( isIE() ) {
    case 0:
      return;
      break;
    case 1:
      objs = document.all.tags(&quot;input&quot;);
      var px = event.clientX;
      var py = event.clientY;
      break;
    case 2:
      objs = document.getElementsByTagName(&quot;input&quot;);
      var px  = el.pageX;
      var py  = el.pageY;
  }
  for (i=0; i<objs.length; i++) {
    if (objs[i].type == &quot;submit&quot;) {
      if ( objs[i].getBoundingClientRect ) {
        var _p=objs[i].getBoundingClientRect();
        var scx = getscrollLen().x;
        var scy = getscrollLen().y;
        if ((_p.left <= px) && (_p.right >= px) && (_p.top+scy <= py) && (_p.bottom+scy >= py)) {
          if (obj) {
            document.mailddform.MAILID.value = obj.id.substring(6,obj.id.length);
          }
        }
      }
    }
  }


謝辞
function getscrollLen() は Diaspar journal 様を参考にさせて頂きました。