JavaScript实现九宫格拖拽效果
更新时间：2022年06月28日 16:06:33 作者：zy_.
这篇文章主要为大家详细介绍了JavaScript实现九宫格拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现九宫格拖拽效果的具体代码，供大家参考，具体内容如下
关于一些拼图游戏什么的，见人家效果做的不错，参考下别人写的代码，我也尝试着做了个。
<!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实现带缓冲效果的仿QQ面板折叠菜单代码,通过JavaScript定时函数递归调用实现折叠菜单的缓冲效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
错误处理是软件工程重要的一部分,如果处理得当,它可以为你节省数小时的调试和故障排除时间,我发现了与错误处理相关的三大疑难杂症：TypeScript的错误类型,变量范围和嵌套,让我们逐一深入了解它们带来的挠头问题,感兴趣的朋友可以参考下2023-09-09
这篇文章主要介绍了js获取video任意时间的画面截图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了bootstrap table复杂操作代码，生成外层表格，填充表格内容,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
《JavaScript高级程序设计》阅读笔记（二） ECMAScript中的原始类型
ECMAScript有5种原始类型(primitive type)，即Undefined、Null、Boolean、Number和String。ECMAScript提供了typeof来判断值的类型2012-02-02
时间轴动画和帧式动画有很大不同,但相比之下时间轴方式来的更直观和简便,下面这篇文章主要给大家介绍了关于如何利用JS实现时间轴动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了JavaScript中 this 指向问题深度解析,JavaScript 中的 this 指向问题有很多文章在解释，仍然有很多人问，本文给大家深度解析，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了仿iPhone通讯录制作小程序自定义选择组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了js判断是否为ie的方法，有需要的朋友可以参考一下2014-01-01
在项目开发中我们常常会去监听滚动事件或者用户输入框验证事件,如果事件处理没有频率限制,当用户不断触发事件时,就会加重浏览器的负担,影响用户的体验,造成不必要的损失,这篇文章主要给大家介绍了关于js防抖节流到底是什么的相关资料,需要的朋友可以参考下2022-04-04
最新评论