實現這個案例,需要考慮到鼠標的拖拽效果(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:案例中的圖片沒有辦法上傳,想要的同學可以自行百度
完整效果:
