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 }
Solve problems in the most elegant way