<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏拖拽</title>
<style>
ul{list-style: none;width: 1200px;height: 700px;margin: 100px auto;padding: 0;border: 1px solid black;position: relative;
display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;}
li{width: 370px;height: 224px;border-radius: 20px;overflow: hidden;cursor: pointer;}
li img{user-select: none;}
</style>
</head>
<body>
<ul>
<li><img src="images/1.png" alt=""></li>
<li><img src="images/2.png" alt=""></li>
<li><img src="images/3.png" alt=""></li>
<li><img src="images/4.png" alt=""></li>
<li><img src="images/5.png" alt=""></li>
<li><img src="images/6.png" alt=""></li>
<li><img src="images/7.png" alt=""></li>
<li><img src="images/8.png" alt=""></li>
<li><img src="images/9.png" alt=""></li>
</ul>
</body>
<script>
/*
程序逻辑 图片是可以拖拽的，可以移动的
1.将图片的弹性盒子布局改成定位布局
1.1获取所有的li元素
1.2获取所有li的位置，将位置储存起来
1.3给每个li设置定位属性， 并设置相应的位置值
2.实现每个li都可以拖拽
新的X位置 = 鼠标距离窗口左边的距离 - 鼠标距离元素左边的距离
行的Y位置 = 鼠标距离窗口上边的距离 - 鼠标距离元素上边的距离
2.1获取当前点击元素的原来位置
2.2获取点击是说标的位置
2.3获取鼠标移动时鼠标的位置
2.4计算新的位置
2.5给当前点击元素设置新的位置
3.碰撞检测
3.1坐标转化
3.2碰撞成功 碰撞逻辑（鼠标移入的元素视为碰撞）
3.3改变碰撞元素的样式，变大 ，加阴影
4.鼠标抬起
4.1碰撞成功就位置变换
4.2不成功就从哪里来回那里去
*/
var ul = document.getElementsByTagName('ul')[0];// 获取li的父级
var lis = document.getElementsByTagName('li');// 获取所有li
var liOffsetArr=[];// 定义数组 存放 li 距离父级的左边和上边的值
var goalli = ''; // 存放目标元素
var z = 1;//定义变量 用于层级设置
// 获取所有li的位置，将位置储存起来
for(var i=0;i<lis.length;i++){
liOffsetArr[i]=[lis[i].offsetLeft,lis[i].offsetTop];
}
// 给每个li设置定位属性， 并设置相应的位置值
for(var i=0;i<lis.length;i++){
lis[i].style.position = 'absolute';
lis[i].style.top = liOffsetArr[i][1] + 'px';
lis[i].style.left = liOffsetArr[i][0] + 'px';
}
// 给所有li绑定事件的循环
for(var i =0;i<lis.length;i++){
lis[i].onmousedown = function(ev){
if(ev.button==0){
var myself = this; //将当前的点击元素报讯起来
var myselfL = myself.offsetLeft; // 点击元素的原始X轴位置
var myselfY = myself.offsetTop; // 点击元素的原始Y轴位置
var evObj = window.evevt || ev; //获取window事件 保证兼容性
var x0 = evObj.clientX - myselfL; // 鼠标点击时的 距离当前元素左边的距离
var y0 = evObj.clientY - myselfY; // 鼠标点击时 距离当前元素上边的距离
// lis[i].onmousedown = null;
document.onmousemove=function(ev){//鼠标移动事件
var evObj = window.event || ev;//获取window事件 保证兼容性
var x1 = evObj.clientX; //鼠标移动时的X轴位置
var y1 = evObj.clientY; //鼠标移动时的Y轴位置
// 计算新的位置
var xoffset = x1 - x0;
var yoffset = y1 - y0;
myself.style.left = xoffset + 'px'; //新的X轴偏移量
myself.style.top = yoffset + 'px'; //新的Y轴偏移量
myself.style.zIndex = z++; //点击元素在其他元素上边
// 坐标转化 --转化为相对li父级的位置
var xR = x1 - ul.offsetLeft; //获取相对坐标
var yT = y1 - ul.offsetTop; //获取相对坐标
// 碰撞检测
for(var i=0;i<lis.length;i++){
// 碰撞成功（鼠标移入的元素）
lis[i].style.transform = ''; //样式还原
lis[i].style.boxShadow = ''; //样式还原
// 碰撞条件
if(xR>lis[i].offsetLeft&&xR<lis[i].offsetLeft+lis[i].offsetWidth&&yT>lis[i].offsetTop&&yT<lis[i].offsetTop+lis[i].offsetHeight&&lis[i]!=myself){
// 2.碰撞后的样式 变大 有阴影
lis[i].style.transform = 'scale(1.05)'; //放大一点
lis[i].style.boxShadow = '0px 0px 5px orange'; // 加阴影
goalli = lis[i]; // 目标元素
return;
} // 不成功 从哪里来 回到那里去
else{
// 目标元素是自己
goalli = myself;
}
}
}
// 鼠标抬起
window.onmouseup =function(){
document.onmousemove = null;// 清除move事件
// 目标存在就代表成功
if(goalli){
// 碰撞成功交换位置
myself.style.left = goalli.offsetLeft + 'px';
myself.style.top = goalli.offsetTop + 'px';
goalli.style.left = myselfL +'px';
goalli.style.top = myselfY + 'px';
goalli.style.transform = ''; //样式还原
goalli.style.boxShadow = ''; //样式还原
}
window.onmouseup =null;
goalli='';
}
return false;//清除img默认拖拽
}
}
}
document.oncontextmenu = function(){ //禁止鼠标右键的点击事件
return false;
}
</script>
</html>
网友评论