Recently, I decided to create my own drag and drop game.
The game is almost complete, but there's one issue. When I try to drop the items into the designated "Drop Items Here" area, their style changes abruptly to mimic the text. For example:
https://i.sstatic.net/lanFm.png
Additionally, if I drop multiple items at once, they end up merging into each other. This can be seen in the following image:
https://i.sstatic.net/Yq4PU.png
Being a beginner in this field, my code might seem unconventional. Is there any way to prevent the items from merging together and maintaining their original styles after being dropped? Thank you for your help.
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
if (data == "1"|"2"|3|4){
event.target.appendChild(document.getElementById(data));
}
}.Drag{
display: flex;
flex-flow: column;
}
.lists {
display: flex;
flex: 1;
width: 100%;
}
.lists .list{
display: flex;
flex-flow: column;
flex: 1;
margin: 0 15px;
}
.lists .list .item {
background-color: #0099ff;
border-radius: 8px;
border: 3px solid #0085de;
padding: 5px 5px;
text-align: left;
margin:4px 0px;
color: white;
font-weight: 900;
}
.DropHere{
text-align: center;
color:#d9d9d9;
font-size: 28px;
}<div class = "Drag">
<div class = "lists">
<div class = "list">
<div>Drag and drop</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)"
style="border-style: dashed; border-color:grey; border-radius: 18px; height: 600px;">
<p class = "DropHere">Drop items here</p>
</div>
</div>
<div class = "list">
<div class = "item" draggable="true" ondragstart="drag(event)" id = "1">This is a</div>
<div class = "item" draggable="true" ondragstart="drag(event)" id = "2">This is b</div>
<div class = "item" draggable="true" ondragstart="drag(event)">This is c</div>
<div class = "item" draggable="true" ondragstart="drag(event)">This is d</div>
<div class = "item" draggable="true" ondragstart="drag(event)" id = "3">This is f</div>
<div class = "item" draggable="true" ondragstart="drag(event)" id = "4">This is g</div>
</div>
</div>
</div>