可任意拖拽的div js 代码

html部分:
<div id="ktz"></div>

css部分:
#ktz{

width:300px;
height:300px;
position:absolute;
}

js部分:
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('ktz');
   rDrag.init(obj);
  }

posted on 2017-12-19 16:56  ʚ别对我无理ɞ  阅读(132)  评论(0编辑  收藏  举报