拖动div简单事例代码

事例文件下载

 //拖动容器代码
 var rDrag = {
     o: null,
     init: function (o) {
         o.onmousedown = this.start;
     },
     start: function (e) {
         var o;
         e = rDrag.fixEvent(e);
         e.preventDefault && e.preventDefault();
         rDrag.o = o = this;
         o.x = e.clientX - rDrag.o.offsetLeft;
         o.y = e.clientY - rDrag.o.offsetTop;
         document.onmousemove = rDrag.move;
         document.onmouseup = rDrag.end;
     },
     move: function (e) {
         e = rDrag.fixEvent(e);
         var oLeft, oTop;
         oLeft = e.clientX - rDrag.o.x;
         oTop = e.clientY - rDrag.o.y;
         rDrag.o.style.left = oLeft + 'px';
         rDrag.o.style.top = oTop + 'px';
     },
     end: function (e) {
         e = rDrag.fixEvent(e);
         rDrag.o = document.onmousemove = document.onmouseup = null;
     },
     fixEvent: function (e) {
         if (!e) {
             e = window.event;
             e.target = e.srcElement;
             e.layerX = e.offsetX;
             e.layerY = e.offsetY;
         }
         return e;
     }
 }

//调用代码
 window.onload=function() {
 var obj = document.getElementById('demo');
        rDrag.init(obj);
 };

html代码
<div id="demo"  style="width: 100px; height: 100px; position: absolute;">拖动我</div>

拖动我