javascript - 两个div重叠以后，在页面重新生成一个div,只生成一个，这个效果怎么写？

<!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>

这是我的代码，问题是只要重叠，就一直不停的添加新的块儿。。
怎么破？？？

# JavaScript

PHP中文网2195 天前508 次浏览

javascript - 两个div重叠以后，在页面重新生成一个div,只生成一个，这个效果怎么写？

全部回复(1) 我要回复