原生JS实现拖动的九宫格

最新推荐文章于 2021-08-21 17:20:20 发布

TTST_HTSN

最新推荐文章于 2021-08-21 17:20:20 发布

阅读量313

点赞数 1

本文链接：https://blog.csdn.net/TTST_HTSN/article/details/104872366

版权

本文详细介绍了如何利用JavaScript实现一个可拖动的九宫格布局。通过监听鼠标事件，动态改变元素的位置，实现了元素在网格中的自由移动，为用户提供了直观的交互体验。

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

                        
                     
 	</div>
	<script type="text/javascript">
		var oWrap = document.getElementById("wrap");
		//创建9个单元格  三行三列
		var ml = mt = 10;
		for(var i = 0; i < 3; i++){//行
			for(var j = 0; j < 3; j++){
				var oDiv = document.createElement("div");//创建div
				oWrap.appendChild(oDiv);//扔进oWrap里
				//top值和行（i）相关
				oDiv.style.top = i*(oDiv.offsetHeight+mt)+"px"; 
				//left值和列（j）相关
				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 = ["A","B","C","D","E","F","G","H","I"];
		var aItems = oWrap.chil