JavaScript ile Drag and Drop Özellikleri Ekleme

Adı : JavaScript ile Drag and Drop Özellikleri Ekleme

JavaScript ile Drag and Drop Özellikleri Ekleme

Drag and drop özellikleri kullanıcılar için oldukça kullanışlıdır. Drag and drop, kelime anlamıyla “sürükle ve bırak” demektir. Bu özellik sayesinde kullanıcılar, öğeleri sürükleyerek belirli bir bölgeye taşıyabilirler. Bu özellik, web uygulamalarında sıklıkla kullanılır. JavaScript, drag and drop özelliklerini uygulamanın en popüler yollarından biridir.

JavaScript, drag and drop özellikleri için beş temel olay kullanır:

dragstart: Sürükleme işlemi başlatıldığında çağrılır.

dragend: Sürükleme işlemi bittiğinde çağrılır.

dragenter: Sürüklenen öğe hedef bölgenin içine girdiğinde çağrılır.

dragover: Sürüklenen öğe hedef bölgede giderken çağrılır.

drop: Sürüklenen öğe bırakıldığında çağrılır.

Bu olaylar birlikte kullanılarak bir sürükle-bırak işlemi oluşturulabilir. Aşağıda, bir sürükle-bırak örneği verilmiştir:

Örnek 1: Basit Sürükle Ve Bırak Örneği

```html



\t
\t


\t

\t

\t


```

Bu örnekte, bir öğe sürüklenir ve hedef div'e bırakılır. Hedef div üzerinde, ondrop olayı öğesinin sürükle-bırak işleminin tamamlandığını belirtir. Bu işlem sırasında, sallaBuldum fonksiyonunun çağrılması gereklidir. Aynı şekilde, ondragover olayı, öğenin sürükleme işlemi sırasında hedef div'in içinde gezdiğini belirtir. Bu özellik onun düzgün çalışabilmesi için onun da belirtilmesi gereklidir.

Sürükleme işlemi başladığında, surukleBuldum fonksiyonu çağrılır ve öğenin id'si setData yöntemiyle aktarılır.

Sürüklenen öğe hedef bölgenin içine girdiğinde, dragenter olayı tetiklenir. Bu işlem sırasında, sınırlar belirlenir ve öğenin bırakılacağı alan gösterilir. Öğe hedef bölgede giderken, ondragover olayı devreye girer.

Son olarak, sürüklenen öğe hedef div'de bırakıldığında ondrop olayı tetiklenir ve öğe hedef bölgeye yerleştirilir.

Örnek 2: Gelişmiş Sürükle Ve Bırak Örneği

```html
















```

Bu örnek biraz daha gelişmiştir. İki div öğesi vardır. İlk öğe, sürüklenen öğelerin listesi için bir alandır. İkinci öğe, öğelerin bırakılacağı alan için bir alandır. İlk div'in içinde, her bir öğe sürüklenebilir hale getirilir. İkinci div'in içinde ise, bırakılacak hedefle uyumlu bir yapısı oluşturulur.

Her öğede, sürükleme eylemini tetikleyecek olan sürükleyici desteği vardır. Bu, ondragstart olayıyla yapılır.

Hedef div, ondragover olayı tarafından izleyen bir yapı oluşturur. Bu yapının öğelerinin üzerine sürüklenecek öğelerin bırakılması yanıtlanacak.

Son olarak, sürüklenen öğelerin hedef div'de bırakıldığı zamanda, \"bosluk\" fonksiyonu verilerin taşınmasını yönetir.

Sık Sorulan Sorular

1) Tarayıcı Desteği Nedir?

> Drag and drop özellikleri, tarayıcı desteği bakımından farklılık gösterir. Genellikle en son Chrome, Firefox, Safari ve Opera tarayıcılarında çalışır. Internet Explorer 9 ve üstü, drag and drop özelliklerini destekler.

2) Drag and drop özellikleri, bir mobil cihazda çalışır mı?

> Bazı mobil tarayıcılarda drag and drop özellikleri desteklenir. Ancak, mobil cihazlar için optimize edilmiş bir sürükle-bırak deneyimi sağlamak için ekstra çaba gerektirebilir.

3) Birden fazla öğeyi sürükleyebilir miyim?

> Evet, birden fazla öğe sürükleyebilirsiniz. Bu durumda, birden fazla öğeyi taşımak için bir grup oluşturmanız gerekir.

4) Hangi özellikler tarayıcıda desteklenmez?

> En yaygın kullanılan tarayıcılarda bile, bazı özelliklerin desteklenmediği olabilir. Örneğin, sürükle-bırak işlemlerinde dosyaların yüklenmesi, IE 11 ve öncesi gibi bazı tarayıcılarda desteklenmez. Bunun yerine, dosya yükleme kutuları ve dosya yükleme düğmeleri kullanılabilir."