ドラグアンドドロップ D&D ドラッグ&ドロップ

こんなのを書いてみた。
------------------------------------------------------
var startDD = function(targetObj) {
 DDFunctions.start(targetObj);
};

DragAndDropClass = function() {};

DragAndDropClass.prototype = {
 targetObj : null,

 start  : function(targetObj) {
  if (!targetObj) {
   return;
  }

  var w = StyleFunctions.setWidth(targetObj);

  //ターゲットをbody直下に変更
  var tmpObj = document.createElement(targetObj.tagName);
  tmpObj = targetObj;
  tmpObj.id = Math.floor(Math.random() * 9999999999);
  document.body.appendChild(tmpObj);

  //元のオブジェクトは削除
  delete targetObj;

  this.targetObj = document.getElementById(tmpObj.id);
  this.targetObj.style.width = w;

  StyleFunctions.setAlpha(40, this.targetObj);
  //IEのselectを非表示にする
  StyleFunctions.hiddenSelect('hidden');

  if(window.attachEvent){
   document.onmousemove = this.drag;
   document.onmouseup  = this.drop;
  } else {
   document.addEventListener("mousemove", this.drag,  false);
   document.addEventListener("mouseup",   this.drop,  false);
  }
 },

 drag  : function(e) {
  e = e || window.event;
  if(DDFunctions.targetObj){
   DDFunctions.targetObj.style.position = "absolute";
   DDFunctions.targetObj.style.left  = e.clientX + MouseFunctions.getX(DDFunctions.targetObj) + "px";
   DDFunctions.targetObj.style.top  = e.clientY + MouseFunctions.getY(DDFunctions.targetObj) + "px";
  } else {
   DDFunctions.drop();
  }
 },

 drop  : function() {
  StyleFunctions.setAlpha(100, DDFunctions.targetObj);
  DDFunctions.targetObj = null;
  StyleFunctions.hiddenSelect('visible');

  //重いから消す
  if(window.attachEvent){
   document.onmousemove = null;
   document.onmouseup  = null;
  } else {
   document.removeEventListener("mousemove", DDFunctions.drag,  false);
   document.removeEventListener("mouseup",   DDFunctions.drop,  false);
  }
 }
};

var MouseClass = function(){};

MouseClass.prototype = {
 getX  : function(obj) {
  //親と子がどちらも動く場合。でもちょっとおかしいか。
  var x = obj.parentNode.style.left;
  //pxなどの単位を消す。
  x = (x) ? x.replace(/[^0-9]/,'') : 0;
  x= MouseFunctions.getScrollX() - parseInt(x);
  return x;
 },

 getY  : function(obj) {
  //親と子がどちらも動く場合。でもちょっとおかしいか。
  var y = obj.parentNode.style.top;
  //pxなどの単位を消す。
  y = (y) ? y.replace(/[^0-9]/,'') : 0;
  return MouseFunctions.getScrollY() - parseInt(y);
 },

 getScrollX  : function(){
  var x;
  try{
   x = document.body.scrollLeft || document.documentElement.scrollLeft;
  }catch(e) {
   x = self.pageXOffset;
  }
  return x;
 },

 getScrollY  : function(){
  var y;
  try{
   y = document.body.scrollTop || document.documentElement.scrollTop;
  } catch(e) {
   y = self.pageYOffset;
  }
  return y;
 }
};

var StyleClass = function(){};

StyleClass.prototype = {
 setWidth : function(targetObj) {
  var width = '';
  //IE
  if (targetObj.currentStyle) {
   width = targetObj.currentStyle['width'];
  //FF
  } else if(document.defaultView) {
   width = document.defaultView.getComputedStyle(targetObj, '').getPropertyValue('width');
  //最上位
  } else {
   return 'auto';
  }

  //widthが設定されていなければ再帰
  if ((!width || width == 'auto')) {
   return this.setWidth(targetObj.parentNode);
  }
  return width;
 },
 hiddenSelect : function(value) {
  return;
  is_ie = 0;
  ie_version = 7;
  //IE6以下はSELECTタグがおかしいからこれが必要になりそう
  if (is_ie && ie_version < 7){
   var selectLists = document.getElementsByTagName('select');
   var selectLen   = selectLists.length;
   for (var i = 0; i < selectLen; i++) {
       selectLists[i].style.visibility = value;
   }
  }
 },

 setAlpha  : function(n, obj) {
  try {
   obj.style.filter    = 'alpha(opacity=' + n + ')';
   obj.targetObj.style.MozOpacity = n / 100;
   obj.targetObj.style.opacity  = n / 100;
  } catch(e){}
 }
};

var DDFunctions = new DragAndDropClass();
var MouseFunctions = new MouseClass();
var StyleFunctions = new StyleClass();
------------------------------------------------------

うーん。あまりよろしくない。
Javascriptのオブジェクトをもっと勉強しようと思った。

上のを<script src=""></script>で読んで動かしたいタグに onmousedown="startDD (this)"と書けば動く。
うーん。