js实现单元格拖拽效果

原创

fengGer的bugs 2021-11-16 09:21:55 博主文章分类：js简单案例 ©著作权

文章标签 拖拽效果 i++ 背景颜色 javascript 拖拽 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者fengGer的bugs的原创作品，请联系作者获取转载授权，否则将追究法律责任

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		#box {
			position: relative;
		}
		
		#box div {
			position: absolute;
			width: 100px;
			height: 100px;
			border-radius: 15px;
			text-align: center;
			line-height: 100px;
			font-size: 50px;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<div id="box"></div>
	<script type="text/javascript">
		//生成结构
		var oDiv = document.getElementById("box");
		var ml = mt = 10;
		//行列结构
		for(var i = 0; i < 3; i++) { //行
			for(var j = 0; j < 3; j++) { //列
				var aDiv = document.createElement("div");
				oDiv.appendChild(aDiv);
				aDiv.style.left = j * (aDiv.offsetWidth + ml) + "px";
				aDiv.style.top = i * (aDiv.offsetHeight + mt) + "px";

				//背景颜色随机
				aDiv.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";  //256=(256-0+1)+0;
			}
		}
		//添加文字
		var str = "ABCDEFGHI";
		var aItems = oDiv.children;
		for(var i = 0; i < str.length; i++) {
			aItems[i].innerText = str[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.offsetX;
				var dragNode = this;

				var cloneNode = dragNode.cloneNode();
				oDiv.replaceChild(cloneNode, dragNode);
				cloneNode.style.border = "1px dashed #ccc";
				oDiv.appendChild(dragNode);
				dragNode.style.zIndex = 1;

				document.onmousemove = function(e) {
					var evt = e || event;
					var _left = evt.clientX - x;
					var _top = evt.clientY - y;

					dragNode.style.left = _left + "px";
					dragNode.style.top = _top + "px";

					return false; //选中,文字也会拖动  去除默认行为
				}
				document.onmouseup = function() {
					var disArr =[];
					var newArr =[];
					for(var i = 0; i < aItems.length-1; i++) {
						var disx = dragNode.offsetLeft - aItems[i].offsetLeft;
						var disy = dragNode.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 minval = disArr[0];
					
					var minIndex = newArr.indexOf(minval);

					dragNode.style.left = aItems[minIndex].style.left;
					dragNode.style.top = aItems[minIndex].style.top;
					aItems[minIndex].style.left = cloneNode.style.left;
					aItems[minIndex].style.top = cloneNode.style.top;
					
					oDiv.removeChild(cloneNode);
					
					document.onmousemove = null;
					document.onmouseup = null;

				}
				return false;
			}
		}
	</script>
</body>