原生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':
if(ev.target.parentNode.tagName==="LI"){
ele=ev.target.parentNode;
ele.style.zIndex=zindex+1;
startX=ele.offsetLeft;
startY=ele.offsetTop;

//2.2获取鼠标点击的位置x
x1=ev.clientX;
y1=ev.clientY;
               console.log("鼠标点击位置:");
               console.log([x1,y1]);
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;
               console.log("图片位置：");
               console.log([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){
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写九宫格图片拖拽替换代码实例

猜你喜欢