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(); 
  });
}

拖放式JavaScript代码有什么问题？

0 个答案: