如何让拖动的div碰到自己移动的div后，移动的div消失呢？ 我自己加的判断一直是fal...
如何让拖动的div碰到自己移动的div后，移动的div消失呢？我自己加的判断一直是false，求大佬指点下
<!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.clientX - box.offsetLeft;
starty = e.touches.clientY - box.offsetTop;
document.addEventListener("touchmove", defaultEvent, { passive: false });
})
box.addEventListener('touchmove',function(e){
endx = e.touches.clientX - startx;
endy = e.touches.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.style.left = (maxwidth - movebox.offsetLeft)*Math.random()+'px';
movebox.style.top = (maxheight - movebox.offsetHeight)*Math.random()+'px';
movebox.style.transition = 'all 1s'
},1000)
let diffnumleft = parseInt(box.style.left)-parseInt(movebox.style.left);
let diffnumtop = parseInt(box.style.top)-parseInt(movebox.style.top);
if(diffnumleft<10&&diffnumleft>=0&&diffnumtop<10&&diffnumtop>=0){
console.log(1)
}
</script>
</body>
</html> 学学习，等待大佬给出方案！ 大概看出几个问题
1 diffnumleft 和 diffnumtop你可以自己输出一下，计算出来的都是NaN，因为通过style.top取出来的是字符串 类似于"20px" "20%"这样的东西，你需要自己正则把数字取出来
2 diffnumleft 和 diffnumtop仅在初始化阶段经过了一次计算，肯定没法用于检测碰撞，建议写在touchmove里实时计算（但是性能问题不知道会咋样）
3 用style里的top left偏移值说实话感觉怪怪的 如果不行的话试试offsetTop之类的属性 zhzhch335 发表于 2021-10-13 17:00
大概看出几个问题
1 diffnumleft 和 diffnumtop你可以自己输出一下，计算出来的都是NaN，因为通过style.to ...
感谢大佬，我自己解决了一些，我是直接用parseint将left和top转成数字再进行加减就ok了。
然后那个检测碰撞确实要写在touchmove里，要不然只会在最初的时候进行检测一下。 zhzhch335 发表于 2021-10-13 17:00
大概看出几个问题
1 diffnumleft 和 diffnumtop你可以自己输出一下，计算出来的都是NaN，因为通过style.to ...
大佬，这个悬赏给你了
https://www.52pojie.cn/thread-1527124-1-1.html
你去回复一下吧 路过看一看
页:
[1]