どうやってドラッグ効果を実現しますか?

2、给盒子添加样式

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

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';  //       ，          ；
}