2.果冻方块拖动

m_cy

于 2023-10-24 14:17:00 发布

阅读量106

点赞数

文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/qq_46918406/article/details/134011359

版权

<!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;
		 
		}
		.jelly {
		        animation: jelly 0.5s infinite alternate;
		      }
		      
		      @keyframes jelly {
		        from {
		          transform: scale(1);
		        }
		        to {
		          transform: scale(1.2);
		        }
		      }
	</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;
	  dragged.classList.add("jelly"); /* 添加这一行 */
	}, 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);
	  }
	 dragged.classList.remove("jelly"); /* 添加这一行 */
	}, false);
	
	function printBlocks() {
	 let container = document.getElementById('container');
	   let blocks = Array.from(container.getElementsByClassName('draggable'));
	   blocks.forEach(block => {
	     console.log(`名称: ${block.textContent}, 序号: ${block.id}`);
	   });
	}
	 // 添加以下代码
	      document.addEventListener("dragend", function(event) {
	        dragged.classList.remove("jelly");
	      }, false);
</script>