拖动到回收站删除

HTML

<div id="div1"></div>
2 <div class="box">回收站</div>

CSS

#div1{
            height: 200px;
            width: 200px;
            background: #ccc;
            position: relative;
            z-index: 9999
    }
    .box{
        height: 200px;
        width: 200px;
        background: #aee;
        position: absolute;
        top: 0;
        right: -20px;
    }

js

window.onload = function(){

　　var div1 = document.getElementById("div1"); 
    var div2 = document.getElementsByClassName('box')[0];
    var x  = div1.clientX;
    var y = div1.clientY;
    console.log(x+'+'+y)
　　div1.onmousedown = function(ev){
　　　　var oevent = ev || event;
　　　　var distanceX = oevent.clientX - div1.offsetLeft;
　　　　var distanceY = oevent.clientY - div1.offsetTop;
　　　　document.onmousemove = function(ev){
　　　　　　var oevent = ev || event;
　　　　　　div1.style.left = oevent.clientX - distanceX + 'px';
　　　　　　div1.style.top = oevent.clientY - distanceY + 'px';
                
　　　　};
　　　　document.onmouseup = function(){
　　　　　　document.onmousemove = null;
　　　　　　document.onmouseup = null;
　　　　}
　　}
div1.onmouseup = function(){
    var height = this.clientHeight;
    var width =  this.clientWidth;
    var top1  = this.offsetTop;
    var left1 = this.offsetLeft;
    // console.log(div2)
    var top2 = div2.offsetTop;
    var left2 = div2.offsetLeft;

    console.log(top1+'--'+left1)
    console.log(top2+'--'+left2);
    var subtractTop = top1 - top2;
    var subtractLeft = left1 - left2;
    console.log(subtractTop+'--'+subtractLeft);
    if (-15<=subtractTop&&subtractTop<=15 && -15<=subtractLeft && subtractLeft<= 15 ) {
        alert('你确定要删除该元素吗?')
    }else{
        div1.style.top = 0;
        div1.style.left = 0;
    }
}
}