<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>九宫格拖拽交换</title>
<style>
#box {
width: 303px;
height: 303px;
margin: 100px auto;
}
#box div {
width: 100px;
height: 100px;
float: left;
margin-left: 1px;
margin-top: 1px;
text-align: center;
line-height: 100px;
font-size: 50px;
color: #FFF;
}
#box div:nth-of-type(1) {
background: #000;
}
#box div:nth-of-type(2) {
background: #f00;
}
#box div:nth-of-type(3) {
background: #0f0;
}
#box div:nth-of-type(4) {
background: #00f;
}
#box div:nth-of-type(5) {
background: #ff0;
}
#box div:nth-of-type(6) {
background: #f0f;
}
#box div:nth-of-type(7) {
background: #0ff;
}
#box div:nth-of-type(8) {
background: pink;
}
#box div:nth-of-type(9) {
background: orange;
}
#box .draging {
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div style="z-index: 1;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<script>
/*
为API而生,为框架死,为debug而奋斗一辈子,
吃了符号的亏,上了大小写的当,最后死在了需求上
*/
/*
给 所有的div添加点击id事件,点击的时候 创建一个div 跟点击的div 一样
并且让点击idiv 可以拖拽 ,
松手的 找出 div 距离 9个div 哪个最近,
让div 的内容和颜色 给 最近的交换, 最后新 div删除
*/
let oDivs = document.querySelectorAll('#box div')
let box = document.querySelector("#box")
oDivs.forEach(function (div, i) {
div.onmousedown = function (e) {
let offsetX = e.offsetX;
let offsetY = e.offsetY;
console.log(this, div);
// var newDiv = document.createElement("div")
var newDiv = div.cloneNode(true) //参数为true 复制子节点,false 不复制子节点
// newDiv.innerHTML = div.innerHTML;
newDiv.style.background = getComputedStyle(div).background;
newDiv.classList.add('draging')
box.appendChild(newDiv)
newDiv.style.left = e.pageX - offsetX + 'px';
newDiv.style.top = e.pageY - offsetY + 'px';
document.onmousemove = function (evt) {
newDiv.style.left = evt.pageX - offsetX + 'px';
newDiv.style.top = evt.pageY - offsetY + 'px';
}
document.onmouseup = function () {
//停止拖拽
document.onmousemove = null
// 松手的 找出 div 距离 9个div 哪个最近,
let arr = []
oDivs.forEach(function (oDiv) {
//oDiv 和 newDiv的距离
let d = distance(oDiv, newDiv);
arr.push(d)
})
console.log(arr);
let min = Math.min(...arr);
let minIndex = arr.indexOf(min)
let minDiv = oDivs[minIndex]
console.log(minDiv);
// 让div 的内容
// 和颜色 给 最近的交换, 最后新 div删除
// minDiv oDiv
let tempColor = getComputedStyle(minDiv).backgroundColor
let tempText = minDiv.innerHTML;
minDiv.style.backgroundColor = getComputedStyle(div).backgroundColor
minDiv.innerHTML = div.innerHTML;
div.innerHTML = tempText;
div.style.backgroundColor = tempColor
newDiv.remove()
}
}
})
function distance(div1, div2) {
//勾股定理 记录 两个元素的距离
var a = div1.offsetLeft - div2.offsetLeft;
var b = div1.offsetTop - div2.offsetTop;
var c = Math.sqrt(a * a + b * b);
return c;
}
</script>
</body>
</html>
【JS功能】JS实现一个九宫格拖拽交换小游戏
于 2024-03-26 22:08:13 首次发布