js实现九宫格拖拽

最新推荐文章于 2024-03-26 22:08:13 发布

啥啥都知道

最新推荐文章于 2024-03-26 22:08:13 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44193613/article/details/86353081

版权

本文介绍了一种使用JavaScript实现九宫格中元素拖拽的方法。通过克隆拖拽节点并计算与九个位置的最近距离进行交换，最终删除克隆节点。拖拽过程中涉及节点的left和top属性更新，以及勾股定理的应用。

摘要由CSDN通过智能技术生成

/思路：拖拽出去的结点克隆一份放在拖拽节点移除的位置，利用勾股定理，比较拖拽节点和九个位置的距离，和距离最近的节点交换位置，最后删除克隆节点；交换时：距离最近的结点的left和top赋给拖拽节点，克隆节点的left和top赋给距离最近的节点（注意：此时的克隆节点left和top保存的是拖拽节点拖拽之前的位置）/
具体代码如下：

<style type="text/css">
		#box{position: relative;}
		span{width: 100px;height: 100px;position: absolute;display: block;border-radius: 10px;text-align: center;font-size: 50px;line-height: 100px;}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
	var box=document.getElementById("box");
	for(var i=0;i<9;i++){
		var span=document.createElement("span");
		box.appendChild(span);
		span.innerText=1+i;
		span.style.left=(i%3)*(100+10)+"px";//设置每个格子的位置
		span.style.top=Math.floor((i/3))*(100+10)+"px";
span.style.background&