创建一个可拖动的dom元素。

首先先建立一个div。

1 var elem = document.createElement('div');
2 elem.style.height = '100px';
3 elem.style.width = '100px';
4 elem.style.backgroundColor = '#ff0';
5 document.body.appendChild(elem);

给元素附加onmousedown事件,这个onmousedown事件又会触发document的onmousemove事件,document的时间用来捕捉到鼠标的坐标,然后把坐标赋给elem的left和top。元素onmouseup事件会把document的onmousemove事件清空(通过赋值为null)。所以元素会停留在松开鼠标的位置。

 1 elem.onmousedown = function (){
 2   this.style.position = 'absolute';
 3    document.onmousemove = function (e){
 4      elem.style.left = e.pageX - parseInt(elem.style.width)/2;
 5      elem.style.top = e.pageY - parseInt(elem.style.height)/2;
 6       }
 7    }
 8 document.onmouseup = function (){
 9   document.onmousemove = null;
10   }

 

posted @ 2014-01-08 00:39  还好我是程序员  阅读(353)  评论(0编辑  收藏  举报