如何使HTML中的元素附加到另一个元素不是<a>标签？

编程问答 2022-06-04

问题描述

我一直在尝试制作一款类似于Little Alchemy的游戏，要求您将不同的元素混合在一起以制作其他元素。到目前为止，这是我的代码：

注意：该代码非常典型，因此我知道我应该重新设置其样式。

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width">
    <title>COMBINATION</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="itemholder" ondrop="drop(event)" ondragover="allowDrop(event)" id="mixer1"></div>
    <div class="itemholder" ondrop="drop(event)" ondragover="allowDrop(event)" id="mixer2"></div>
<button onclick="combine()"> Combine </button>
<center>
<div class="itemholder" ondrop="drop(event)" ondragover="allowDrop(event)" id="output"></div>
</center>
<br>
<row>
<div class="itemholder" ondrop="drop(event)" ondragover="allowDrop(event)" id="holder">
  <img id="1" src="./imgs/1.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
</div>
    <div class="itemholder" ondrop="drop(event)" ondragover="allowDrop(event)" id="holder">
      <img id="2" src="./imgs/2.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
    </div>
    <div class="itemholder" ondrop="drop(event)" ondragover="allowDrop(event)" id="holder">
      <img id="8" src="./imgs/8.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
    </div>
    <div class="itemholder" ondrop="drop(event)" ondragover="allowDrop(event)" id="holder"></div>
    <div class="itemholder" ondrop="drop(event)" ondragover="allowDrop(event)" id="holder"></div>
</row>
    <script src="script.js"></script>
  </body>
</html>

问题是，我为元素使用的许多图像看起来都是相同的，而且我在游戏中没有图像的标签。如果项目不变，我将能够轻松添加标签，但是要拖拽它们，主要问题是：

我无法同时拖动图像和标签

我有什么办法可以解决，而无需在图像中添加标签 ？

解决方法

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

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

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

dragdrophtmlimageimage