javascript ドラッグアンドドロップについてのメモ

HTML

<div style="position:absolute;  cursor: move; top:0px; left:0px;"><img src='xxx.png'/></div>

javascript

onload=function () {
   if (document.all) {
      // IE用
      objlist = document.all.tags("div");
   } else if (document.getElementsByTagName) {
      // IE以外
      objlist = document.getElementsByTagName("div");
   } else {
      return;
   }
   for (i = 0; i < objlist.length; i++) {
      objlist[i].onmousedown = onMouseDown;
   }
   document.onmousemove = onMouseMove;
   document.onmouseup = onMouseUp;

}
function onMouseDown(e) {
   obj = this;
   if (document.all) {
      offsetX = event.offsetX + 2;
      offsetY = event.offsetY + 2;
   } else if (obj.getElementsByTagName) {
      offsetX = e.pageX - parseInt(obj.style.left);
      offsetY = e.pageY - parseInt(obj.style.top);
   }
   return false;
}
function onMouseMove(e) {
   if (!obj) {
      return true;
   }
   if (document.all) {
      obj.style.left = event.clientX - offsetX + document.body.scrollLeft;
      obj.style.top = event.clientY - offsetY + document.body.scrollTop;
   } else if (obj.getElementsByTagName) {
      obj.style.left = e.pageX - offsetX;
      obj.style.top = e.pageY - offsetY;
   }
   return false;
}
function onMouseUp(e) {
   obj = null;
}

よくみるjavascriptのドラッグアンドドロップの記述方法です。

HTML記述にて必須の項目は、 div タグの position の指定と、 top、left の指定です。
注意する点としては、position 指定は スタイルシートでの記述は可能。
しかし、top 、left 記述は、スタイルシート不可です。

理由は、javascriptの

      obj.style.left = e.pageX - offsetX;
      obj.style.top = e.pageY - offsetY;

があるからです。
つまり、 style.left や、style.top を指定しているから。

というつまらないことに、はまったので、メモしておきます。

ちょっと、ドラッグアンドドロップに似ているので、座標関連も一つ。
IEでのイベント時の座標取得について。

function onMouseUp(e){  
    if (document.all) {
        // IE用
    	var x = event.clientX;
        var y = event.clientY;
    } else {
        // IE以外
    	var x = e.pageX;
        var y = e.pageY;
    }
}

と、することにより座標を取得できます。
しかし、ほんと、IEって使いにくいですね。
クロスブラウジングの対応がほんとうに面倒・・・