javascript - 这个拖放式 javascript 代码有什么问题？

Question

我花了大约 3 个小时来解决这个问题，但我仍然不知道究竟是什么导致了这种行为。我正在尝试编写一个浏览器游戏，其中您有库存和设备选项卡。当我将物品 div 从库存移动到设备选项卡 div 时，一切正常，但是一旦我尝试将其移回库存，所有物品都会堆叠在鼠标光标上。我通过将设备库存 div 移动为设备标签 div 的子级来解决它。但我仍然不确定是什么导致了这个问题。我希望我解释得很好。我有这个 HTML 代码

<div id="equipmenttab" >
  <div class="leftitems">
    <div  class="dragcontainer" id="helm" ></div>
    <div  class="dragcontainer" id="neck"></div>
    <div  class="dragcontainer" id="shoulder"></div>
    <div  class="dragcontainer" id="cape"></div>
    <div  class="dragcontainer" id="chest"></div>
    <div  class="dragcontainer" id=""></div>
    <div  class="dragcontainer" id=""></div>
    <div  class="dragcontainer" id="wrist"></div>
  </div>

  <div class="rightitems">
    <div  class="dragcontainer" id="glove"></div>
    <div  class="dragcontainer" id="waist"></div>
    <div  class="dragcontainer" id="legs"></div>
    <div  class="dragcontainer" id="feet"></div>
    <div  class="dragcontainer" id="ring"></div>
    <div  class="dragcontainer" id="ring"></div>
    <div  class="dragcontainer" id="trinket"></div>
    <div  class="dragcontainer" id="trinket"></div>
  </div>
  <div class="bottomitems">
    <div  class="dragcontainer" id="mainhand"></div>
    <div  class="dragcontainer" id="offhand"></div>
    <div  class="dragcontainer" id="wand"></div>
  </div>
</div>

<div class="inventory-container">
  <div  class="dragcontainer inventory" ><div id="12" class="item helm" 
                                              draggable="true"></div></div>
  <div  class="dragcontainer inventory" ><div id="13" class="item 
    chest" draggable="true"></div></div>
  <div  class="dragcontainer inventory" ><div id="156" class="item 
    legs" draggable="true"></div></div>
  <div  class="dragcontainer inventory" ></div>
  <div  class="dragcontainer inventory" ></div>
  <div  class="dragcontainer inventory" ></div>
  <div  class="dragcontainer inventory" ></div>
  <div  class="dragcontainer inventory" ></div>
  <div  class="dragcontainer inventory" ></div>
  <div  class="dragcontainer inventory" ></div>
</div>

和这个javascript代码

var draggeditem;
var items = document.getElementsByClassName("item");
for (i=0;i < items.length; i++){
  items[i].addEventListener("dragstart", function(){
    draggeditem=event.target.id;
    //event.dataTransfer.setData("text", event.target.id);
    draggedItemClassName = event.target.className;
    draggedItemClassName = draggedItemClassName.split(" ");
    console.log(event.dataTransfer.getData('text'));  
  });
}    

var containers = document.getElementsByClassName('dragcontainer');
for (i=0; i < containers.length; i++) {
  containers[i].addEventListener("drop", function(){
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    if(hoveredItemId == draggedItemClassName[1]){
      event.target.appendChild(document.getElementById(draggeditem));
      draggeditem = null;
      console.log(draggeditem);
    }
    else if(hoveredItemClassName[1] == 'inventory'){
      event.target.appendChild(document.getElementById(draggeditem));
      draggeditem = null;
      console.log(draggeditem);
    }
  });
  containers[i].addEventListener("dragover", function(){
    hoveredItemId = event.target.id;
    hoveredItemClassName = event.target.className;
    hoveredItemClassName = hoveredItemClassName.split(" ");
    console.log(hoveredItemClassName[1]);
    event.preventDefault(); 
  });
}

标签： javascripthtml