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

我花了3个小时才解决这个问题，但我仍然不知道到底是什么导致了这种行为。 我试图写一个浏览器游戏，你有库存和设备选项卡。 当我将项目div从“库存”移动到“设备”选项卡divs时，所有项目都会工作，但一旦我尝试将其移回“库存”，所有项目都会堆叠在鼠标光标上。 我通过将设备库存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(); 
  });
}

var-draggeditem；
var items=document.getElementsByClassName（“item”）；
对于（i=0；i

此代码是否按预期工作，或者是否存在问题？当你说你解决了你的问题时，你的问题并不清楚！既然你的问题解决了，你为什么要在这里发布此代码？此代码没有按预期工作，我发布了此代码，因为我希望有人能解释为什么会发生此情况。@JirkaKastan你也可以发布你的CSS，以便我们可以将你的代码作为一个片段运行吗？很抱歉，我刚刚关闭了laptot，我现在正在移动，所以我无法发布CSS。