JS 实现九宫格拖拽实例

<!doctype html>
<html lang='en'>
<meta charset='utf-8'>
   <head>
    <style type="text/css">
   body,ul{
   margin:0;
   }
   ul{
   position:relative;
   padding-left:0;
   width:100%;
   height:100%;
   background-color:#ddd;
   }
       #nav{
        margin:100px auto;
        width:640px;
        height:400px;
        border: 1px solid #ccc;
        border-radius: 10px;
       }
       li{
        float:left;
        list-style-type: none;
        width:200px;
       height:120px;
        border-radius: 10px;
       margin:10px 0 0 10px;
       }
       #nav li img{
        width:100%;
        height:100%;
        border-radius:10px;
       }
    </style>
    <title>九宫格拖拽</title>
    </head>
<body>
<div>
   <ul id='nav'>
      <li><img src="image/1.jpg" alt=""/></li>
      <li><img src="image/2.jpg" alt=""/></li>
      <li><img src="image/3.jpg" alt=""/></li>
      <li><img src="image/4.jpg" alt=""/></li>
      <li><img src="image/5.jpg" alt=""/></li>
      <li><img src="image/6.jpg" alt=""/></li>
      <li><img src="image/7.jpg" alt=""/></li>
      <li><img src="image/8.jpg" alt=""/></li>
      <li><img src="image/9.jpg" alt=""/></li>
   </ul>
</div>
    <script>
        /*
           程序逻辑：
             1.把所有的li元素从浮动改变成定位
                 1.1 获取li元素
                 1.2 获取li的位置：放到一个数组里面
                 1.3 给li元素设置定位
                 1.4 给li元素设置位置值
              2.实现li元素拖拽特效
                x轴移动的距离 x2-x1
                y轴移动的位置距离
                2.1 获取元素的相对位置+元素移动的距离
                2.2获取鼠标点击的位置x1,y1
                2.3获取鼠标移动的位置x2,y2
                2.4计算元素的新位置
                2.5设置元素的新位置
        */
        //1.1 获取li元素
        var aLi=document.querySelectorAll("li");
        var lips=[];
        var oNav=document.getElementById("nav");
        for(let i=0,len=aLi.length;i<len;i++){
            //console.log(aLi[i].offsetTop,aLi[i].offsetLeft);
            //1.2 获取li的位置：放到一个数组里面
            lips.push([aLi[i].offsetTop,aLi[i].offsetLeft]);
             //定时器解决js单线程
            setTimeout(function(){
              //1.3 给li元素设置定位
            aLi[i].style.position="absolute";
            //1.4 给li元素设置位置值
            aLi[i].style.top=lips[i][0]+'px';
            aLi[i].style.left=lips[i][1]+'px';
            aLi[i].style.margin=0;
          },0);
        }

        oNav.addEventListener('mousedown',drag);
       //document.addEventListener('mousedown',drag);
        document.addEventListener('mousemove',drag);
        document.addEventListener('mouseup',drag);
        var toggle=false;//是否点中元素
        var startX,startY,x1,y1,ele,zindex;
        zindex=1;
        var ele,goalgle
        function drag(ev){
           ev=ev||window.event;//获取鼠标事件
           //console.log(ev);
           ev.preventDefault();//阻止默认事件

           switch(ev.type){
            case 'mousedown':
                 //console.log(ev.target.parentNode);
                if(ev.target.parentNode.tagName==="LI"){
                  //console.log(ev);
                  ele=ev.target.parentNode;
                  ele.style.zIndex=zindex+1;
                  //console.log(ele.style.zIndex);
                  startX=ele.offsetLeft;
                  startY=ele.offsetTop;


                  //2.2获取鼠标点击的位置x
                  x1=ev.clientX;
                  y1=ev.clientY;
                  toggle=true;
                }
              break;
            case 'mousemove':
            //鼠标移动的位置
               //ele=ev.target.parentNode;
               if(toggle){
                 var x2=ev.clientX;
                 var y2=ev.clientY;
                //2.4计算元素的新位置
                 var nowX=startX+x2-x1;
                 var nowY=startY+y2-y1;
                // 2.5设置元素的新位置

                ele.style.left=nowX+"px";
                ele.style.top=nowY+"px";

                var xR=x2-oNav.offsetLeft;//x2相对位置
                var yR=y2-oNav.offsetTop;

                for(var j=0,len=aLi.length;j<len;j++){
                  if(ele!=aLi[j]&&xR>aLi[j].offsetLeft&&xR<aLi[j].offsetLeft+200&&yR>aLi[j].offsetTop&&yR<aLi[j].offsetTop+120){
                    aLi[j].style.transform="scale(1.05)";
                    goalgle=aLi[j];
                  }
                  else{
                    aLi[j].style.transform="scale(1)";
                  }
                  toggle=true;
                }
               }
              break;
            case 'mouseup':
              toggle=false;
              if(goalgle){
                  console.log(ev.type);
                  ele.style.top=goalgle.offsetTop+"px";
                  ele.style.left=goalgle.offsetLeft+"px";
                  goalgle.style.top=startY+"px";
                  goalgle.style.left=startX+"px";
                  goalgle.style.transform="scale(1)";
                  toggle=false;
              }
              ele.style.zIndex=1;
              goalgle="";

              break;

           }
        }
    </script>
</body>
</html>

效果： JS 实现九宫格拖拽实例

JS 实现九宫格拖拽 实例

相关推荐

JS 实现九宫格拖拽实例