<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
.d1{height:50px;width:220px;list-style:none;}
.tops{height:50px;width:50px;float:left;background:#e4393c;margin-right:3px;}
.d2{height:100px;width:350px;list-style:none;}
.bots{height:50px;width:50px;float:left;background:blue;margin-right:3px;margin-bottom:3px;}
.insert{height:50px;width:50px;float:left;background:yellow;margin-right:3px;margin-bottom:3px;}
.new{width:50px;height:50px;background:pink;}
</style>
</head>
<body>
<ul class= "d1">
<li class="tops"></li>
<li class="tops"></li>
<li class="tops"></li>
<li class="tops"></li>
</ul>
<p>
<ul class= "d2">
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
<li class="bots"></li>
</ul>
</p>
<script>
$('.tops').on('mousedown',function(event){
var e = window.evnet||arguments[0];
//鼠标相对当前元素位置
var posx = e.clientX - $(this).offset().left;
var posy = e.clientY - $(this).offset().top;
var nd =$(this);//当前元素
var xind = $('<li>nihohoa</li>')
$(document).bind('mousemove',function(){
var e = window.evnet||arguments[0];
//移动时的位置
var npx = e.clientX- posx;
var npy = e.clientY- posy;
//当前元素四边位置
var t1 = nd.offset().top;
var b1 = t1 + nd.height();
var l1 = nd.offset().left;
var r1 = l1+nd.width();
//设置移动时位置
nd.css({'left':(npx+'px'),'top':(npy+'px'),'position':'absolute'})
$('.bots').each(function(){
var t2 = $(this).offset().top;
var b2 = t2 + $(this).height();
var l2 = $(this).offset().left;
var r2 = l2 + $(this).width();
var xxn = $('<li class="tops"></li>')
//碰撞检测
var self = $(this);
if(t1<=b2&&b1>=t2&&l1<=r2&&r1>=l2){
self.next().before(xxn);
//碰撞
}else{
//不碰撞碰撞
}
})
})
$(document).bind('mouseup',function(){
$(document).unbind('mousemove');//解绑事件
$(document).unbind('mouseup')//解绑事件
})
})
</script>
</body>
</html>
这是我的代码，问题是只要重叠，就一直不停的添加新的块儿。。
怎么破？？？
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
if(t1<=b2&&b1>=t2&&l1<=r2&&r1>=l2){...}
这句有问题吧
if(t1<=t2&&b1>=b2&&l1<=l2&&r1>=r2)