merhaba arkadaşlar javascipt ile basit bir oyun yapmak istiyorum, bunun için araba resminin olduğu yere parçalarının adlarını yazacağım , doğru parça üzerine sürüklenip bırakıldığında, tik işareti ne bilim yeşil renk olsun yada bir yazı yazsın nasıl yapabilirim.


Kendimci bir yere getirdim ama devamı noktasında yardınıza ihtiyacım var


Kod:

<style>
.box {
  height: 24;
  width: auto;
font-size:16px;
  position: relative;
  top: 5px;
  left: 5px;
  cursor: pointer;
}


.held {
  border: solid 10px black;
  background-color: black;
}


.holder {
  height: 24px;
  width: 110px;
  margin: 10px;
  border: solid 5px black;
  background-color: white;
  display: inline-block;
}


.hovered {
  border: dotted 5px black;
}


.invisible {
  display: none;
}


#container {
  margin: auto;
  top: 100px;
  width: 400px;
  position: relative;
}
</style>
<script>
class App {


  static init() {


    App.box = document.getElementsByClassName('box')[0]


    App.box.addEventListener("dragstart", App.dragstart)
    App.box.addEventListener("dragend", App.dragend)


    const containers = document.getElementsByClassName('holder')


    for(const container of containers) {
      container.addEventListener("dragover", App.dragover)
      container.addEventListener("dragenter", App.dragenter)
      container.addEventListener("dragleave", App.dragleave)
      container.addEventListener("drop", App.drop)
    }
  }


  static dragstart() {
    this.className += " held"
  
    setTimeout(()=>this.className="invisible", 0)
  }


  static dragend() {
    this.className = "box"
  }


  static dragover(e) {
    e.preventDefault()
  }


  static dragenter(e) {
    e.preventDefault()
    this.className += " hovered"
  }


  static dragleave() {
    this.className = "holder"
  }


  static drop() {
    this.className = "holder"
    this.append(App.box)
  }


}


document.addEventListener("DOMContentLoaded", App.init)
</script>


<div id="container">
   <div class="holder">
     <div class="box" draggable="true"> lastik          </div>
   </div>
  
   <div class="holder">
   </div>
</div>