<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模拟热血三国内城安置建筑物</title><style>body {background: #000;display: flex;flex-direction: column;align-items: center;}#many-buildings {display: flex;justify-content: center;margin-top: 200px;}.item,.b-item {width: 75px;height: 75px;font-size: 24px;display: flex;justify-content: center;align-items: center;user-select: none;cursor: move;border: 1px solid #ccc;margin: 10px;color: white;text-shadow: 1px 1px 1px #090909;}.b-civilian-house {background: #FFD700;}.b-barracks {background: #800000;}.b-warehouse {background: #b59648;}.b-market {background: #32CD32;}.b-inn {background: #4682B4;}.b-recruitment {background: #9ACD32;}.b-blacksmith {background: #FFA07A;}.b-workshop {background: #008080;}.b-training {background: #228B22;}.b-academy {background: #ADD8E6;}.b-imperial {background: #90EE90;}.b-stable {background: #8A2BE2;}.b-post {background: #20B2AA;}.b-beacon {background: #556B2F;}#grid-container {display: flex;flex-direction: column;align-items: center;margin-top: 20px;}.g-item-001 {display: flex;flex-direction: row;}.g-item-01 {display: grid;grid-template-columns: repeat(2, 100px);}.g-item-3 {width: 200px;height: 200px;display: flex;font-size: 80px;font-weight: bold;justify-content: center;align-items: center;background: #808080;border: 1px solid #ccc;user-select: none;}.g-item-002 {display: grid;grid-template-columns: repeat(6, 100px);}.g-item {width: 100px;height: 100px;background: #808080;display: flex;justify-content: center;align-items: center;color: white;text-shadow: 1px 1px 1px #090909;font-size: 14px;border: 1px solid #ccc;position: relative;}</style>
</head><body><div id="many-buildings"><div class="item b-civilian-house" draggable="true"><b>0</b>民房</div><div class="item b-barracks" draggable="true"><b>0</b>军营</div><div class="item b-warehouse" draggable="true"><b>0</b>仓库</div></div><div id="grid-container"><div class="g-item-001"><div class="g-item-01"><div class="g-item g-item-1"></div><div class="g-item g-item-2"></div><div class="g-item g-item-6"></div><div class="g-item g-item-7"><div class="b-item b-blacksmith" draggable="true">铁匠铺</div></div></div><div class="g-item-3">官府</div><div class="g-item-01"><div class="g-item g-item-4"></div><div class="g-item g-item-5"></div><div class="g-item g-item-8"><div class="b-item b-imperial" draggable="true">鸿胪寺</div></div><div class="g-item g-item-9"></div></div></div><div class="g-item-002"><div class="g-item g-item-10"></div><div class="g-item g-item-11"><div class="b-item b-workshop" draggable="true">工匠作坊</div></div><div class="g-item g-item-12"><div class="b-item b-training" draggable="true">校场</div></div><div class="g-item g-item-13"><div class="b-item b-beacon" draggable="true">烽火台</div></div><div class="g-item g-item-14"></div><div class="g-item g-item-15"><div class="b-item b-academy" draggable="true">书院</div></div><div class="g-item g-item-16"></div><div class="g-item g-item-17"></div><div class="g-item g-item-18"><div class="b-item b-stable" draggable="true">马厩</div></div><div class="g-item g-item-19"></div><div class="g-item g-item-20"></div><div class="g-item g-item-21"></div><div class="g-item g-item-22"></div><div class="g-item g-item-23"></div><div class="g-item g-item-24"></div><div class="g-item g-item-25"><div class="b-item b-post" draggable="true">驿站</div></div><div class="g-item g-item-26"></div><div class="g-item g-item-27"><div class="b-item b-market" draggable="true">市场</div></div><div class="g-item g-item-28"></div><div class="g-item g-item-29"></div><div class="g-item g-item-30"><div class="b-item b-inn" draggable="true">客栈</div></div><div class="g-item g-item-31"></div><div class="g-item g-item-32"><div class="b-item b-recruitment" draggable="true">招贤馆</div></div><div class="g-item g-item-33"></div></div></div><script>const gridContainer = document.getElementById('grid-container');const manyBuildings = document.getElementById('many-buildings');let draggedItem = null;document.querySelectorAll('.item').forEach(item => {item.addEventListener('dragstart', dragStartItem);item.addEventListener('dragend', dragEnd);});document.querySelectorAll('.b-item').forEach(item => {item.addEventListener('dragstart', dragStartBItem);item.addEventListener('dragend', dragEnd);});gridContainer.addEventListener('dragover', dragOver);gridContainer.addEventListener('drop', dragDrop);manyBuildings.addEventListener('dragover', dragOver);manyBuildings.addEventListener('drop', dragDrop);function dragStartItem(e) {draggedItem = e.target;e.dataTransfer.setData('text/html', e.target.innerHTML);// 增加原始 b-item 的数字const bElement = draggedItem.querySelector('b');if (bElement) {bElement.textContent = parseInt(bElement.textContent) + 1;}}function dragStartBItem(e) {draggedItem = e.target;e.dataTransfer.setData('text/html', e.target.innerHTML);}function dragEnd(e) {draggedItem = null;}function dragOver(e) {e.preventDefault();}function dragDrop(e) {e.preventDefault();if (draggedItem) {if (draggedItem.classList.contains('b-item')) {// 直接移动 b-itemif (e.target.classList.contains('g-item')) {// 检查目标 g-item 是否已经包含一个 b-itemif (e.target.querySelector('.b-item') === null) {e.target.appendChild(draggedItem);} else {console.log("目标 g-item 已经包含一个建筑物");}} else if (e.target.id === 'many-buildings' && draggedItem.parentElement.parentElement.id !== 'many-buildings') {manyBuildings.appendChild(draggedItem);}} else if (draggedItem.classList.contains('item')) {// 复制 itemconst clone = draggedItem.cloneNode(true);if (e.target.classList.contains('g-item')) {// 检查目标 g-item 是否已经包含一个 b-itemif (e.target.querySelector('.b-item') === null) {e.target.appendChild(clone);} else {console.log("目标 g-item 已经包含一个建筑物");}} else if (e.target.id === 'many-buildings' && draggedItem.parentElement.parentElement.id !== 'many-buildings') {manyBuildings.appendChild(clone);}}}}</script></body></html>
