HTML

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

CSS

 1 #div1{
 2             height: 200px;
 3             width: 200px;
 4             background: #ccc;
 5             position: relative;
 6             z-index: 9999
 7     }
 8     .box{
 9         height: 200px;
10         width: 200px;
11         background: #aee;
12         position: absolute;
13         top: 0;
14         right: -20px;
15     }

js

 1 window.onload = function(){
 2 
 3   var div1 = document.getElementById("div1"); 
 4     var div2 = document.getElementsByClassName('box')[0];
 5     var x  = div1.clientX;
 6     var y = div1.clientY;
 7     console.log(x+'+'+y)
 8   div1.onmousedown = function(ev){
 9     var oevent = ev || event;
10     var distanceX = oevent.clientX - div1.offsetLeft;
11     var distanceY = oevent.clientY - div1.offsetTop;
12     document.onmousemove = function(ev){
13       var oevent = ev || event;
14       div1.style.left = oevent.clientX - distanceX + 'px';
15       div1.style.top = oevent.clientY - distanceY + 'px';
16                 
17     };
18     document.onmouseup = function(){
19       document.onmousemove = null;
20       document.onmouseup = null;
21     }
22   }
23 div1.onmouseup = function(){
24     var height = this.clientHeight;
25     var width =  this.clientWidth;
26     var top1  = this.offsetTop;
27     var left1 = this.offsetLeft;
28     // console.log(div2)
29     var top2 = div2.offsetTop;
30     var left2 = div2.offsetLeft;
31 
32     console.log(top1+'--'+left1)
33     console.log(top2+'--'+left2);
34     var subtractTop = top1 - top2;
35     var subtractLeft = left1 - left2;
36     console.log(subtractTop+'--'+subtractLeft);
37     if (-15<=subtractTop&&subtractTop<=15 && -15<=subtractLeft && subtractLeft<= 15 ) {
38         alert('你确定要删除该元素吗?')
39     }else{
40         div1.style.top = 0;
41         div1.style.left = 0;
42     }
43 }
44 }

 

posted on 2017-08-24 10:35  yangh_martin  阅读(225)  评论(0编辑  收藏  举报