phpstudy集成环境

 首页 > 我想实现拖动元素 碰到下边哪个元素，哪个元素就变色，但是下边元素总是整体变色，求教代码改怎么改

我想实现拖动元素 碰到下边哪个元素，哪个元素就变色，但是下边元素总是整体变色，求教代码改怎么改

<!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>
  <style>
  ul{padding:0;margin:0;}
    #tp{height:50px;width:310px;margin：0 auto;list-style:none;}
    .tps{height:40px;width:60px;float:left;text-align:center;background:#e4393c;line-height:40px;margin-right:1px;    
    }
    .container{height:500px;width:600px;background:#ccc;margin:0 auto;}
    .container ul{list-style:none;height:300px;width:500px;margin:0 auto;}
    .inner{height:40px;width:59px;float:left;text-align:center;background:#666;line-height:40px;margin-right:1px;
            margin-top:1px;position:relative;
    }
  </style>
  <script src="jquery.min.js" type="text/javascript"></script>
 </head>
 <body>
  

  <div class="container">
  <ul id="tp">
    <li class="tps">关于我</li>
    <li class="tps">你好</li>
    <li class="tps">信息</li>
    <li class="tps">服务</li>
    <li class="tps">假期</li>
  </ul>
    <ul>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
    </ul>

    <script>
        $('.tps').each(function(){
            $(this).mousedown(function(){
            
            var  e=window.event||arguments[0];
            var posX = $(this).offset().left;
            var posY = $(this).offset().top;
            var nd = $(this);
                        
            $(document).on('mousemove',function(){            
                var  e=window.event||arguments[0];
                nd.css({'left':(e.clientX-posX +'px'),'position':'relative'});
                nd.css('top', (e.clientY-posY+'px'));
                var ndn =$('.inner');
                var t1 = e.clientY-posY;
                var b1 = t1 + $('.tps').height();
                var l1 = e.clientX-posX ;
                var r1 = l1 + $('.tps').width();
                var inns = document.getElementsByClassName('inner');
                for(var i = 0 ;i<inns.length;i++){
                    var t2 = inns[i].style.top;
                    var b2 = inns[i].width + t2;
                    var l2 = inns[i].style.left;
                    var r2 = inns[i].style.left+l2;
                    if(r1<l2||l1>r2||b1<b2||t1>b2){
                        inns[i].style.backgroundColor = 'blue';
                        }else{
                        inns[i].style.backgroundColor = 'yellow';
                }


                }
                    
            })

        $(document).on('mouseup',function(){
                $(document).unbind('mousedown');
![图片描述][1]                $(document).on('mouseup',null);
        })
            })
            
        })
        
    </script>
  </div>
 </body>
</html>

.tips 这个dom节点在哪里？

你这个代码习惯...我好想帮你修改，可是工作量太大...，算了；
说下你的问题inns[i].style.top，这种只能取到行间样式，
console.log(t2)就可以知道了...

修改下：
你可以打开chrome看下控制台里的元素style，


你下面的li根本没有top,left，那怎么识别两个物体之间的碰撞？？？？

【热门文章】
【热门文章】