Recently, I have been working on developing a drag and drop game where the goal is to set the original value to none once the items are dropped correctly.
function dragStart(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
event.preventDefault();
var data = ev.dataTransfer.getData("Text");
var dropdata = ev.target.getAttribute("drop-id")
if (data == dropdata){
ev.target.appendChild(document.getElementById(data))
a = ev.target.getAttribute("drop-id");
a.style.display = "none";}
}.App{
display: flex;
flex: 1;
flex-flow: column;
}
.App .Box{
display: flex;
flex: 1;
width: 100%;
}
.App .Box .Boxes{
display: flex;
flex: 1;
flex-flow: column;
}
.AM {
border: 3px solid black;
border-radius: 10px;
background-color: orange;
padding: 5px 5px;
margin: 4px 0px;
width: 90%;
}
.Example {
border-style: Dashed;
border-color: grey;
border-radius: 10px;
width: 90%;
padding: 5px 5px;
margin: 4px 0px;
}
.DB{
border: 3px solid black;
border-radius: 10px;
background-color: green;
padding: 5px 5px;
margin: 4px 0px;
width: 90%;
} <div class = "App">
<div class = "Box">
<div class "Boxes">
<div class = "AM">This is A</div>
<div class = "AM">This is B</div>
<div class = "AM">This is C</div>
<div class = "AM">This is D</div>
<div class = "AM">This is E</div>
</div>
<div class = "Boxes">
<div class = "Example" ondrop = "drop(event)" ondragover = "allowDrop(event)" drop-id = "1">Drop here to match</div>
<div class = "Example" ondrop = "drop(event)" ondragover = "allowDrop(event)" drop-id = "2">Drop here to match</div>
<div class = "Example" ondrop = "drop(event)" ondragover = "allowDrop(event)" drop-id = "3">Drop here to match</div>
<div class = "Example" ondrop = "drop(event)" ondragover = "allowDrop(event)" drop-id = "4">Drop here to match</div>
<div class = "Example" ondrop = "drop(event)" ondragover = "allowDrop(event)" drop-id = "5">Drop here to match</div>
</div>
<div class = "Boxes">
<div class = "DB" draggable = "true" ondragstart="dragStart(event)" id = "1">A</div>
<div class = "DB" draggable = "true" ondragstart="dragStart(event)" id = "2">B</div>
<div class = "DB" draggable = "true" ondragstart="dragStart(event)" id = "3">C</div>
<div class = "DB" draggable = "true" ondragstart="dragStart(event)" id = "4">D</div>
<div class = "DB" draggable = "true" ondragstart="dragStart(event)" id = "5">E/div>
</div>
</div>
</div>After successfully dropping the items, I aim to make the "Drop here to match" area divisible. I tried using getAttribute() method to achieve this but unfortunately was unable to set it to 'none'. Is there any alternative way to use getAttribute() in order to apply styles like display : none or visibility : hidden? Your insights would be greatly appreciated.