ele.ondragstart=down;
    ele.ondrag=move;
    ele.ondragend=up;
    dragstart事件表示拖拽开始的阶段，就是鼠标按下去了，准备移动鼠标之前的这个阶段。在这个阶段需要把拖拽的准备工作做好。
    drag事件表示拖拽进行的阶段，就是鼠标按着呢，并且还在移动鼠标（mousedown和mousemove的结合），在这个阶段，随着鼠标的移动不断重新计算DOM元素的位置
    dragend事件表示拖拽结束的阶段，就是鼠标抬起来、并且DOM元素不再跟着鼠标的移动而移动。
    具体的代码实现如下：
        
         

CSS样式如下：

            
    *{ margin:0;
        padding:0;
        -webkit-user-select:none;
    }
    div{ width:100px;
        height:100px;
        background:red;
        position:absolute;
        top:0;
        left:0;
        cursor:move;
    }
            
        

HTML代码如下:

            
    <div id="div1" draggable="true"></div>
    注意：要把draggable属性设为true，要不然拖不动哦
            
            

JavaScript代码实现如下

            
    function start(e){//绑定到dragstart事件，表示拖拽开始。
        this.x=this.offsetLeft;//在拖拽开始的时候，把DOM元素的位置保存下来
        this.y=this.offsetTop;
        this.mx=e.pageX;//把鼠标的位置也保存下来，以备在drag（拖拽进行阶段）事件中重新计算位置
        this.my=e.pageY;
    }
    function move(e){//拖拽进行中
        //DOM元素的新位置=它的老位置+（鼠标移动的距离=鼠标现在的位置-鼠标原来的位置）
        this.style.top=this.y+e.pageY-this.my+"px";
        this.style.left=this.x+e.pageX-this.mx+"px";
    }
    function end(e){
        //还需要在拖拽结束的阶段，再重新确定一下DOM元素的位置
        this.style.left=this.x+e.pageX-this.mx+"px";
        this.style.top=this.y+e.pageY-this.my+"px";
    }
        //下面用DOM二级事件来绑定这三个方法
        ele.addEventListener("dragstart",start,false);
        ele.addEventListener("drag",move,false);
        ele.addEventListener("dragend",end,false);