1.方块拖动

最新推荐文章于 2024-05-30 15:07:12 发布

m_cy

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量55

点赞数

文章标签： 1024程序员节前端

本文链接：https://blog.csdn.net/qq_46918406/article/details/134010703

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container">
		  <div class="draggable" draggable="true" id="1">方块1</div>
		  <div class="draggable" draggable="true" id="2">方块2</div>
		  <div class="draggable" draggable="true" id="3">方块3</div>
		  <div class="draggable" draggable="true" id="4">方块4</div>
		  <div class="draggable" draggable="true" id="5">方块5</div>
		  <div class="draggable" draggable="true" id="6">方块6</div>
		  <div class="draggable" draggable="true" id="7">方块7</div>
		  <div class="draggable" draggable="true" id="8">方块8</div>
		  <div class="draggable" draggable="true" id="9">方块9</div>
		  <div class="draggable" draggable="true" id="10">方块10</div>
		</div>
		
		<button onclick="printBlocks()">打印方块信息</button>
	</body>
	<style>
		#container {
		  width: 500px;
		  border: 1px solid black;
		  display: flex;
		  flex-wrap: wrap;
		  align-content: flex-start;
		}
		
		.draggable {
		  width: 50px;
		  height: 50px;
		  border: 1px solid red;
		  margin: 5px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
	</style>
</html>

<style>
	
</style>
<script>
	let blocks = [
	  {id: 1, name: '方块1'},
	  {id: 2, name: '方块2'},
	  {id: 3, name: '方块3'},
	  {id: 4, name: '方块4'},
	  {id: 5, name: '方块5'},
	  {id: 6, name: '方块6'},
	  {id: 7, name: '方块7'},
	  {id: 8, name: '方块8'},
	  {id: 9, name: '方块9'},
	  {id: 10, name: '方块10'}
	  // 添加更多的方块
	];
	
	let dragged;
	
	document.addEventListener("drag", function(event) {}, false);
	
	document.addEventListener("dragstart", function(event) {
	  dragged = event.target;
	}, false);
	
	document.addEventListener("dragover", function(event) {
	  event.preventDefault();
	}, false);
	
	document.addEventListener("drop", function(event) {
	  event.preventDefault();
	  if (event.target.className == "draggable") {
	    let temp = {...blocks[dragged.id - 1]};
	    blocks[dragged.id - 1] = blocks[event.target.id - 1];
	    blocks[event.target.id - 1] = temp;
	    dragged.parentNode.insertBefore(dragged, event.target);
	  }
	}, false);
	
	function printBlocks() {
	 let container = document.getElementById('container');
	   let blocks = Array.from(container.getElementsByClassName('draggable'));
	   blocks.forEach(block => {
	     console.log(`名称: ${block.textContent}, 序号: ${block.id}`);
	   });
	}
</script>