JS实现拖拽

1.HTML结构：

<div class='drag'></div>

 <div class='drag2'></div>

2.CSS样式：

.drag,.drag2{
      width:100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
    .drag2{
      background-color: green;

    }

3.JS代码：（可实现页面中任意元素的拖拽）

 document.onmousedown = function(e){
        var event = e || window.event;
        var target = event.target || event.srcElement;
        var l = parseInt(event.clientX - target.offsetLeft);
        var t = parseInt(event.clientY - target.offsetTop);
        this.onmousemove = function(e){
          var event = e || window.event;
          var left = parseInt(event.clientX) - l;
          var top = parseInt(event.clientY) - t;
          target.style.left = left + 'px';
          target.style.top = top + 'px';
        }
        this.onmouseup = function(){
          this.onmousemove = null;
        }
      }