本帖最后由 楚子沦i 于 2021-10-13 16:32 编辑
如何让拖动的div碰到自己移动的div后，移动的div消失呢？
我自己加的判断一直是false，求大佬指点下
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
width: 100%;
}
.box {
position: absolute;
height: 50px;
width: 50px;
background: red;
z-index: 1;
}
.movebox {
position: absolute;
height: 50px;
width: 50px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="movebox box1">
</div>
<div class="movebox box4">
</div>
<div class="movebox box3">
</div>
<div class="movebox box2">
</div>
<div class="movebox box5">
</div>
<div class="movebox box6">
</div>
<script type="text/javascript">
const box = document.querySelector('.box');
let maxwidth = document.body.clientWidth - box.offsetWidth;
let maxheight = document.body.clientHeight - box.offsetHeight;
box.addEventListener('touchstart',function(e){
startx = e.touches[0].clientX - box.offsetLeft;
starty = e.touches[0].clientY - box.offsetTop;
document.addEventListener("touchmove", defaultEvent, { passive: false });
})
box.addEventListener('touchmove',function(e){
endx = e.touches[0].clientX - startx;
endy = e.touches[0].clientY - starty;
if (endx < 0){
endx = 0;
}
if(endy<0){
endy = 0;
}
if(endx > maxwidth){
endx = maxwidth;
}
if(endy >maxheight){
endy = maxheight;
}
box.style.left=endx+'px';
box.style.top=endy+'px'
console.log(diffnumleft<10&&diffnumleft>=0&&diffnumtop>-10&&diffnumtop<=0)
})
box.addEventListener('touchend',defaultEvent,{ passive: false });
function defaultEvent(e) {
e.preventDefault();
}
const movebox = document.querySelectorAll('.movebox');
setInterval(()=>{
movebox[0].style.left = (maxwidth - movebox[0].offsetLeft)*Math.random()+'px';
movebox[0].style.top = (maxheight - movebox[0].offsetHeight)*Math.random()+'px';
movebox[0].style.transition = 'all 1s'
},1000)
let diffnumleft = parseInt(box.style.left)-parseInt(movebox[0].style.left);
let diffnumtop = parseInt(box.style.top)-parseInt(movebox[0].style.top);
if(diffnumleft<10&&diffnumleft>=0&&diffnumtop<10&&diffnumtop>=0){
console.log(1)
}
</script>
</body>
</html> | 
发表于 2021-10-13 11:36
|
发表于 2021-10-13 21:29
