如何实现拖拽效果

1、新建盒子

<div class="box"></div>

2、给盒子添加样式

.box{
    width: 0px;
    height: 0px;
    background: rgb(205, 235, 255);
    border: 1px double rgb(116, 116, 116);
    position: absolute;
    top: 0px;
    left: 0px;
}

3、在js中实现

var box = document.getElementsByClassName('box')[0];  //创建一个宽高为0的盒子
var doX = 0;  //创建一个为0的变量
var doY = 0;  //创建一个为0的变量
var on_off = false;  // 创建一个变量，当前赋予的值为false；

window.onmousedown = function (e) {  //写一个点击事件，当前为鼠标按下时；
    on_off = true;  //当鼠标点下时，on_off赋值为true，就把上面的赋值给替换掉了；
    e = e || window.event;
    doX = e.clientX;   //获取鼠标在页面中点下时的x坐标
    doY = e.clientY;   //获取鼠标在页面中点下时的y坐标
}

window.onmousemove = function (e) {  //创建一个鼠标滑过事件；
    if(on_off){  //当前on_off的赋值为上面的true，所以就要执行if判断的true
    e = e || window.event;
    moX = e.clientX;  //获取鼠标在页面中滑过时的x坐标
    moY = e.clientY;  //获取鼠标在页面中滑过时的y坐标
    var box_w = Math.abs(moX - doX);  //目前盒子的宽就为滑过后的位置减去点击时的x的距离，如果点击后从右向左滑，这时候就是负距离，所以需要加一个绝对值Math.abs;
    var box_h = Math.abs(moY - doY);  //目前盒子的高就为滑过后的位置减去点击时的x的距离；
    var box_top = Math.min(moY,doY);  //这是盒子定位后的top值，盒子是根据左上角去进行定位的，这时候我点击向右滑，盒子就根据点击的这个坐标去进行定位，如果点击向左滑，这时候盒子的定位坐标就需要根据滑过后的点去进行定位；
    var box_left = Math.min(moX,doX);
    box.style = 'width:'+ box_w +'px; height:'+ box_h +'px; top:'+ box_top +'px; left: '+ box_left +'px;'
    }  //最后给盒子输出滑过之后的宽、高、top、left、
}

window.onmouseup = function (e) {  //创建一个鼠标抬起事件；
    on_off = false;  //这时候就需要把滑过事件关闭了；
    e = e || window.event;
    box.style = 'display:none';  //最后抬起为收尾，要给盒子添加隐藏样式；
}