<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.nav {
640px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto 0;
}
.nav ul {
position: relative;
100%;
height: 100%;
}
.nav ul li {
float: left;
200px;
height: 120px;
margin: 10px 0 0 10px;
border-radius: 10px;
transition: 0.2s;
/*position: absolute;*/
/*top:0;
left:0;*/
}
.nav ul li img {
display: block;
100%;
height: 100%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li id="1"><img src="images/1.png"></li>
<li id="2"><img src="images/2.png"></li>
<li id="3"><img src="images/3.png"></li>
<li id="5"><img src="images/4.png"></li>
<li id="6"><img src="images/5.png"></li>
<li id="7"><img src="images/6.png"></li>
<li id="8"><img src="images/7.png"></li>
<li id="9"><img src="images/8.png"></li>
<li id="1"><img src="images/9.png"></li>
</ul>
</div>
<script>
/*
1.把所有的li元素绝对定位
1.1获取li元素
1.2获取元素的位置
1.3给li设置定位样式
1.4给所有的li设置定位值top， left
2.实现每个li的拖拽
li元素x轴方向移动的距离=x2-x1；
li元素的新位置=li元素的旧位置+x2-x1；
2.1鼠标点击li元素时鼠标的位置x1,y1
2.2鼠标点击li元素时元素的位置sX,sY;
2.3获取鼠标滑动位置x2,y2;
2.4计算元素的新位置sX+x2-x1;
2.5给元素设置一个新的位置值;
*/
var goldata = [];
var aLi = document.querySelectorAll('li');
var oNav = document.querySelector(".nav");
var oNavL = oNav.offsetLeft;
var oNavT = oNav.offsetTop;
var aPs = [] //存放所有li元素的位置
for (let i = 0, len = aLi.length; i < len; i++) {
aPs.push([aLi[i].offsetTop, aLi[i].offsetLeft]);
setTimeout(function() {
aLi[i].style.position = "absolute";
aLi[i].style.left = aPs[i][1] + 'px';
aLi[i].style.top = aPs[i][0] + 'px';
aLi[i].style.margin = 0;
}, 0)
}
oNav.addEventListener("mousedown", drag);
document.addEventListener("mousemove", drag);
document.addEventListener("mouseup", drag);
var flag = false;
var x1, y1, sX, sY, ele, z = 1,
goalele = null;
//goalele存放目标元素的变量
function drag(ev) {
var ev = ev || window.event;
ev.preventDefault();
switch (ev.type) {
case "mousedown":
if (ev.target.parentNode.tagName === 'LI') {
ele = ev.target.parentNode;
ele.style.zIndex = z++;
//鼠标点击li元素时鼠标的位置x1,y1
x1 = ev.clientX;
y1 = ev.clientY;
// console.log('点中了li');
//鼠标点击li元素时元素的位置sX,sY;
sX = ele.offsetLeft;
sY = ele.offsetTop;
flag = true;
}
break;
case "mousemove":
if (flag) {
//获取鼠标滑动位置x2,y2;
var x2 = ev.clientX;
var y2 = ev.clientY;
//计算元素的新位置sX+x2-x1;
var nowX = sX + x2 - x1;
var nowY = sY + y2 - y1;
//给元素设置一个新的位置值;
ele.style.left = nowX + 'px';
ele.style.top = nowY + 'px';
//算出相对于父元素的偏移量
var xr = x2 - oNavL;
var yr = y2 - oNavT;
for (var n = 0, len = aLi.length; n < len; n++) {
aLi[n].style.transform = "";
if (
ele != aLi[n] &&
xr > aLi[n].offsetLeft &&
xr < aLi[n].offsetLeft + 200 &&
yr > aLi[n].offsetTop &&
yr < aLi[n].offsetTop + 120) {
// console.log('碰撞了');
aLi[n].style.transform = "scale(1.05)";
if (aLi[n].style.transform != '') {
goalele = aLi[n];
}
} else if (0 > nowX || nowX > oNav.offsetWidth || nowY > oNav.offsetHeight || nowX < 0) { //判断是否拖拽出某个区域
goalele = null;
aLi[n].style.transform = "";
}
}
}
break;
case "mouseup":
flag = false;
// //松开之后得判断是不是在div内
if (goalele && ele.offsetTop > 0) {
// console.log( ele.offsetTop)
// console.log(oNav.offsetTop)
//碰撞到目标元素了改变位置
ele.style.left = goalele.offsetLeft + "px";
ele.style.top = goalele.offsetTop + "px";
goalele.style.left = sX + 'px';
goalele.style.top = sY + 'px';
goalele.style.transform = "";
ele.style.transform = "";
goalele = null;
} else {
//没碰撞到目标元素回复原位置
ele.style.left = sX + "px";
ele.style.top = sY + "px";
// ele.style.transform = "";
}
ele.style.transform = "";
break;
}
}
</script>
</body>
</html>