怎么新建MySQL数据库
发布时间：2022-09-06
作者：admin
阅读：349
阅读：349
这篇文章给大家分享的是“基于JS如何实现九宫格拖拽的功能”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。
现在大家对于基于JS如何实现九宫格拖拽的功能的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
关于一些拼图游戏什么的，见人家效果做的不错，参考下别人写的代码，我也尝试着做了个。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
}
#wrap div{
position: absolute;
width: 100px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script type="text/javascript">
//生成结构
var oWrap = document.getElementById("wrap");
var mt = ml = 10;
for(var i = 0; i < 3; i++){
for(var j = 0; j < 3; j++){
var oDiv = document.createElement("div");
oWrap.appendChild(oDiv);
oDiv.style.top = i*(oDiv.offsetHeight + mt) + "px";
oDiv.style.left = j*(oDiv.offsetWidth + ml) + "px";
oDiv.style.backgroundColor = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
}
}
var arr = "ABCDEFGHI";
var aItems = oWrap.children;
var len = aItems.length;
for(var i = 0; i < aItems.length; i++){
aItems[i].innerHTML = arr[i];
}
//拖拽及交换位置
for(var i = 0; i < aItems.length; i++){
aItems[i].onmousedown = function(e){
var evt = e || event;
var x = evt.offsetX;
var y = evt.offsetY;
/*var x = evt.clientX - this.offsetLeft - oWrap.offsetLeft;
var y = evt.clientY - this.offsetTop - oWrap.offsetTop;*/
var _this = this;
var cloneNode = this.cloneNode();
cloneNode.style.border = '1px dashed #cecece';
this.style.zIndex = 1;
oWrap.replaceChild(cloneNode,this);
oWrap.appendChild(this);
document.onmousemove = function(e){
var evt = e || event;
var _left = evt.clientX - x - oWrap.offsetLeft;
var _top = evt.clientY - y - oWrap.offsetTop;
_this.style.left = _left + "px";
_this.style.top = _top + "px";
return false;
}
document.onmouseup = function(){
//交换位置
var disArr = [];
var newArr = [];
console.log(aItems.length);
for(var i = 0; i < len; i++){
var disX = _this.offsetLeft - aItems[i].offsetLeft;
var disY = _this.offsetTop - aItems[i].offsetTop;
var dis = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2));
disArr.push(dis);
newArr.push(dis);
}
disArr.sort(function(a,b){
return a-b;
})
var minIndex = newArr.indexOf(disArr[0]);
_this.style.left = aItems[minIndex].style.left;
_this.style.top = aItems[minIndex].style.top;
aItems[minIndex].style.left = cloneNode.style.left;
aItems[minIndex].style.top = cloneNode.style.top;
oWrap.removeChild(cloneNode);
document.onmousemove = null;
document.onmouseup = null;
}
}
}
/*var arr = [45,32,11,90];
var minVal = Math.min.apply(null,arr);
var minIndex = arr.indexOf(minVal);
console.log(minVal,arr,minIndex);*/
</script>
</body>
</html>这是效果图
虽说实现了效果，但我写的还是不太严谨，还有诸多bug，比如上边做边没距离，实际写的话还要加上这个距离，即使距离为0，还有就是我发现拖拽的时候，如果使用qq截图的话，克隆的那个小方块没办法消失，只得重新刷新页面，有没有大佬解决下。
现在大家对于基于JS如何实现九宫格拖拽的功能的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理