原生JS实现九宫格拼图
实现这个案例,需要考虑到鼠标的拖拽效果(onmousedown/onmousemove/mouseup)
拖拽分解:
按下鼠标---->移动鼠标----->松开鼠标
1.给目标元素添加onmousedown事件,拖拽的前提是在目标元素按下鼠标左键
2.当onmousedown事件发生后,此刻给document添加onmousemove事件,意味着此刻鼠标在网页的移动都将改变元素的位置
3.在onmousemove事件中,设定目标元素的left和top
公式:
目标元素的left = 鼠标的clienX - (鼠标和元素的横坐标差,即offsetX)
目标元素的top = 鼠标的clientY -(鼠标和元素的纵坐标差,即offsetY)
4.当onmousedown发生以后,此刻给document添加onmouseup事件,意味着此刻鼠标在网页的任意位置松开鼠标,都会放弃拖拽效果,在onmouseup事件中,取消document的onmousemove事件即可
当然这个小案例也用到了关于DOM元素系列的操作,对于新手而言,算一个很好的综合训练
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>九宫格</title>
<style>
#box {
height: 300px;
width: 300px;
position: relative;
background-color: brown;
margin: 10px auto;
}
span {
width: 100px;
height: 100px;
position: absolute;
font-size: 50px;
text-align: center;
line-height: 100px;
color: #FFF;
user-select: none;
cursor: pointer;
font-weight: bolder;
}
#one {
top: 0;
left: 0;
background: url(./5.jpg);
background-size: 100% 100%;
}
#two {
top: 0;
left: 100px;
background: url(./7.jpg);
background-size: 100% 100%;
}
#three {
top: 0;
left: 200px;
background: url(./9.jpg);
background-size: 100% 100%;
}
#four {
top: 100px;
left: 0;
background: url(./1.jpg);
background-size: 100% 100%;
}
#five {
top: 100px;
left: 100px;
background: url(./2.jpg);
background-size: 100% 100%;
}
#six {
top: 100px;
left: 200px;
background: url(./4.jpg);
background-size: 100% 100%;
}
#seven {
top: 200px;
left: 0;
background: url(./3.jpg);
background-size: 100% 100%;
}
#eight {
top: 200px;
left: 100px;
background: url(./6.jpg);
background-size: 100% 100%;
}
#nine {
top: 200px;
left: 200px;
background: url(./8.jpg);
background-size: 100% 100%;
}
#box .cBox {
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<span id="one"></span>
<span id="two"></span>
<span id="three"></span>
<span id="four"></span>
<span id="five"></span>
<span id="six"></span>
<span id="seven"></span>
<span id="eight"></span>
<span id="nine"></span>
</div>
</body>
<script>
var oBox = document.getElementById("box")
var box = document.querySelectorAll("span");
function Box(boxName) {
boxName.onmousedown = function (eve) {
var e = eve || window.event;
var cSpan = document.createElement("span");
cSpan.style.background = getComputedStyle(boxName).background;
cSpan.style.top = boxName.offsetTop + "px";
cSpan.style.left = boxName.offsetLeft + "px";
cSpan.className = "cBox"
oBox.appendChild(cSpan)
var offsetX = e.pageX - cSpan.offsetLeft;
var offsetY = e.pageY - cSpan.offsetTop;
document.onmousemove = function (eve) {
var e = eve || window.event;
cSpan.style.left = e.pageX - offsetX + "px";
cSpan.style.top = e.pageY - offsetY + "px";
}
document.onmouseup = function () {
document.onmousemove = null;
var spans = oBox.getElementsByTagName("span")
var minSpan = null;
var min = 1000;
for (var i = 0; i < spans.length - 1; i++) {
var span = spans[i];
var dis = distance(cSpan, span);
if (dis <= min) {
min = dis;
minSpan = span;
}
}
var lsColor = getComputedStyle(minSpan).background;
minSpan.style.background = getComputedStyle(boxName).background;
boxName.style.background = lsColor;
oBox.removeChild(cSpan);
document.onmouseup = null;
}
return false;
}
}
function distance(span1, span2) {
var a = span1.offsetLeft - span2.offsetLeft;
var b = span1.offsetTop - span2.offsetTop;
var c = Math.sqrt(a * a + b * b);
return c;
}
for (var i = 0; i < box.length; i++) {
Box(box[i]);
}
</script>
</html>
ps:案例中的图片没有办法上传,想要的同学可以自行百度
完整效果:
