如何解决如何使HTML中的元素附加到另一个元素不是<a>标签?
我一直在尝试制作一款类似于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 举报,一经查实,本站将立刻删除。