极客观点
项目管理
HarmonyOS
<!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>
<div>
<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>
</div>
<script>
$('.tops').on('mousedown',function(){
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>
看的时候需要添加jquery 文件
原因的mousemove事件不断触发，所以才会不断添加li。
但是具体的需求是什么？ 是蓝色的方块只能碰一次吗？
如果是这样就很好解决，只要在碰撞的时候判断该蓝色的方块是不是已经碰撞过了。