Javasciript yardım

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Java Javasciript yardım

Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı

0
Cevap 599
Tıklama 0
Öne Çıkarma

1. sayfa

Javasciript yardım

Cevap Yaz

susogutmakulesi

7 yıl

Konu Sahibi

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



<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>

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Java Javasciript yardım