将拖放图像堆叠在网格内

问题描述

我正在为游戏项目制作地图生成器，并且需要能够在CSS网格内的“地形”图像之上堆叠“存款”精灵。这两个图像都将被拖放。

我的问题是，只要放下沉积精灵，任何地方的地形图像都会被删除。我尝试过将地形图像移至网格背景，但仍被删除。如何在同一个网格内将沉积精灵堆叠在地形精灵之上？

我还是JS的新手，所以任何想法都会有所帮助。

HTML：

<div class="item item4">
  <div class="item item4b">
   <fieldset>
     <legend>Selection</legend>
     <!-- Expanded image -->
       <img id="selectedImg" style="width:2em;height:2em;">
       <!-- Image text -->
         <div id="imgtext"></div>
           <label for="selectedImg" style="color:white;"/>
   </fieldset>
 </div> 
 <div class="item item4a">
   <fieldset>
     <legend>Grid:</legend> 
       <div class="row"> 
         <div class="column">
           <img src="assets/clay-terrain.png" alt="Clay Terrain"onclick="selectImage(this);"/>
             <img src="assets/grass-terrain.png" alt="Grass Terrain" onclick="selectImage(this);"/>
               <img src="assets/lava-terrain.png" alt="Lava Terrain" onclick="selectImage(this);"/>
         </div>
         <div class="column">
           <img src="assets/ice-terrain.png" alt="Ice Terrain" onclick="selectImage(this);"/>
           <img src="assets/ocean-terrain.png" alt="Ocean Terrain" onclick="selectImage(this);"/>
         </div>
         <div class="column">
           <img src="assets/sand-terrain.png" alt="Sand Terrain" onclick="selectImage(this);"/>
           <img src="assets/rock-terrain.png" alt="Rock Terrain" onclick="selectImage(this);"/>
         </div>
       </div>
       <div class="row"> 
         <div class="column">
           <img src="assets/bronze-sprite.png" class= "deposit" alt="Bronze Deposit" 
           onclick="selectImage(this);"/>
           <img src="assets/carbon-sprite.png" class= "deposit" alt="Carbon Deposit" 
           onclick="selectImage(this);"/>
           <img src="assets/gold-sprite.png" class= "deposit" alt="Gold Deposit" 
           onclick="selectImage(this);"/>
         </div>
         <div class="column">
           <img src="assets/emerald-sprite.png" class= "deposit" alt="Emerald Deposit" 
           onclick="selectImage(this);"/>
           <img src="assets/diamond-sprite.png" class= "deposit" alt="Diamond Deposit" 
           onclick="selectImage(this);"/>
           <img src="assets/iron-sprite.png" class= "deposit" alt="Iron Deposit" 
           onclick="selectImage(this);"/>
         </div>
         <div class="column">
           <img src="assets/purple-powerstone-sprite.png" class= "deposit" alt="Purple Powerstone 
           Deposit" onclick="selectImage(this);"/>
           <img src="assets/redstone-sprite.png" class= "deposit" alt="Redstone Deposit" 
           onclick="selectImage(this);"/>
           <img src="assets/silver-sprite.png" class= "deposit" alt="Silver Deposit" 
           onclick="selectImage(this);"/>
         </div>
       </div>

CSS：

.grid-item {
  border: 0.5px dashed black;
  /*background-image: url(assets/rock-terrain.png);*/
  background-size: 100%;
  background-color: grey;
  background-position: absolute;
}

.deposit {
  z-index: 1;
  opacity: 0.4;
};

.grid-terrain {
  z-index: 0;
}

JavaScript：

//selected image display
function selectImage(imgs) {
  // Get the expanded image
  var selectImg = document.getElementById("selectedImg");
  // Get the image text
  var imgText = document.getElementById("imgtext");
  // Use the same src in the expanded image as the image being clicked on from the grid
  selectImg.src = imgs.src;
  selectImage.className = imgs.className;
  // Use the value of the alt attribute of the clickable image as text inside the expanded image
  imgText.innerHTML = imgs.alt;
  // Show the container element (hidden with CSS)
  selectImg.parentElement.style.display = "block";
} 

//drag and drop stuff
//id of dragtarget needs to be set to selection image

document.addEventListener("dragstart",function(event) {
  // The dataTransfer.setData() method sets the data type and the value of the dragged data
  event.dataTransfer.setData("image",event.target.id);

  // Change the opacity of the draggable element
  //event.target.style.opacity = "0.4";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend",function(event) {
  event.target.style.opacity = "1";
});

// When the draggable p element enters the droptarget,change the DIVS's border style
document.addEventListener("dragenter",function(event) {
  if ( event.target.className == "grid-item" ) {
    event.target.style.border = "1px solid #26f50b";
  }
});

// By default,data/elements cannot be dropped in other elements. To allow a drop,we must prevent the default handling of the element
document.addEventListener("dragover",function(event) {
  event.preventDefault();
});

// When the draggable p element leaves the droptarget,reset the DIVS's border style
document.addEventListener("dragleave",function(event) {
  if ( event.target.className == "grid-item" ) {
    event.target.style.border = "";
  }
});

//places terrain and deposit
 document.addEventListener("drop",function(event) {
  event.preventDefault();
  var selectedWindow = docment.getElementById("selectedImg");
  if ( event.target.className == "grid-item" && selectedWindow.className == "deposit" ) {
    event.target.style.border = "";
    var data=event.dataTransfer.getData("image");
    var nodeCopy1 = document.getElementById(data).cloneNode(true);
    nodeCopy1.id = "grid-itemDeposit";
    nodeCopy1.className = "deposit";
    event.target.appendChild(nodeCopy1);
  }
  else (event.target.className == "grid-item") {
    event.target.style.border = "";
    /*event.target.innerHTML = "";*/
    var data=event.dataTransfer.getData("image");
    var nodeCopy2 = document.getElementById(data).cloneNode(true);
    nodeCopy2.id = "grid-itemTerrain";
    nodeCopy2.classname = "grid-terrain";
    event.target.appendChild(nodeCopy2);
  }
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）