İçindekiler
Zaten bu öğreticinin ilk bölümünde, uygulamanın nasıl başlatılacağını gördük. sürükleme olayı elemanları sürükleyerek yani işin bir kısmını yaptık, o ilk bölümdeki farklı olaylarla nasıl etkileşime gireceğimizi gördük.Şimdi öğeyi yerleştireceğimiz alanı nasıl etkinleştireceğimizi bilmemiz gerekiyor, zaten sayfamızda eksiksiz işlevler elde etmemizi sağlayacak olan tamamlayıcı eylemdir.
Mevduat alanı oluşturma
Bu, sürüklediğimiz öğeleri bırakacağımız alandır, bu alanı manipüle etmek için birkaç etkinliğimiz olacak, bu olayların nasıl ele alınacağını daha iyi anlamak için her birini listeleyeceğiz ve nasıl çalıştığını açıklayacağız. .
Etkinlikler (düzenle)
- Ejderha: Para yatırma alanı için tanımladığımız ekrandaki boşluğa sürüklenen bir eleman girdiğinde aktif olur.
- Sürükle: Sürüklenen eleman daha önce tanımladığımız yerleştirme alanı içinde hareket ettiğinde tetiklenir.
- Sürükle: Sürüklenen bir öğenin yerleştirme alanından ayrıldığı anda etkinleştirilir.
- Düşürmek: Para yatırma alanında bir eşya bırakıldığında devreye giren olaydır.
Hangi olaylara sahip olduğumuzu öğrendikten sonra, sürüklediğimiz bir öğeyi bırakırken veya yerleştirirken, yatırma alanında görüntülendiği basit bir kod oluşturacağız.
Bunun için bazı fonksiyonları kullanacağız. iç HTML alana atılan elementi klonlayacağımız yer.
Örnek kodu görelim:
Örnek
Buraya bırak
Yakından bakarsak, hedef elementi depozit alanını içerecek element olarak tanımlarız, bu yapıldıktan sonra olayların her birinde ne olacağını, eğer bakarsak ne olacağını tanımlarız. olay düşürme son adımın gerçekleştiği yerdir, burada sürüklenen öğeyi klonlayacağız ve iç HTML sürüklemekte olduğumuz elementi bıraktığımızda asenkron olarak göstereceğiz.
Dikkat etmemiz gereken bir diğer şey ise tarayıcının default olayının üzerine yazmaktır, bunu fonksiyonu oluştururken yönetiyoruz. tutamakSürükleBu sayede tarayıcının talimatları tarafımızdan beklenmeyen bir şekilde yorumlamasını engellemiş oluyoruz.
Tarayıcımızda şöyle görünmelidir:
