ライブラリの多くは id を用いて Drag&Dropを行なう要素を指定するが id はドキュメントにたいしてユニークではないといけないなど制約があり面倒ということで，id を用いないで div などの要素を Drag&Drop できるようにする．なお，Firefoxのみでの動作確認．

var div;
function addXY(erea) {
   div = erea;
   document.addEventListener('mousedown',start,true);
}
function removeXY() {
   document.removeEventListener('mousedown',start,true);
}
function start(e) {
   this.ex = e.clientX - parseInt(div.style.left); /* マウスと左上の点との差分*/
   this.ey = e.clientY - parseInt(div.style.top);
   document.addEventListener('mousemove',drag,true);
   document.addEventListener('mouseup',end,true);
   this.opacity = div.style.opacity;              /* 現在の半透明状態をキャッシュ*/
   div.style.opacity = this.opacity * 0.4;        /* 表示を半透明にする */
}
function drag(e) {
   var dx = e.clientX - this.ex;
   var dy = e.clientY - this.ey;
   if(dx < 0) dx = 1;
   if(dy < 0) dy = 1;
   div.style.left =  dx + 'px';
   div.style.top = dy + 'px';
}
function end(e) {
   div.style.opacity = this.opacity;
   document.removeEventListener('mousemove',drag,true);
   document.removeEventListener('mouseup',end,true);
}
	     

div の領域にマウスがかかったら, onmouseover にて，drag と drop をするイベントリスナーを追加し，omouseout で，それぞれのリスナーを削除する． <div style="position:absolute;z-index:900;top:1px;left:1px;background-color:orange; border:1px dashed black;opacity:0.6;overflow:hidden;width:100px;height:40px; max-height:100%;margin-bottom:15px;cursor:move" onMouseOver="addXY(this)" onMouseOut="removeXY()"> </div>

• 気が向いたらその他のブラウザでの動作も行なえるようにする．
• onload 時に document 内に特定のクラスがある場合には， onmouseover, onmouseout での動作を付け加えるようにする関数を定義してもよいだろうか?