Sürükle Bırak İşlemi ile Temel HTML Kodlama

Adı : Sürükle Bırak İşlemi ile Temel HTML Kodlama

Sürükle bırak işlemi, bir web sayfasındaki nesnelerin sürüklenip bırakılması işlemidir. Bu işlem, kullanıcılara interaktif bir deneyim sunar ve birçok web sitesinde kullanılır. Bu yazıda, sürükle bırak işlemi ile temel HTML kodlamayı öğreneceksiniz.
Sürükle Bırak İşlemi Nasıl Yapılır?
Sürükle bırak işlemi, JavaScript kullanılarak gerçekleştirilir. HTML'in temel yapısına ek olarak, birkaç satır JavaScript kodu kullanarak sürükle bırak işlemini oluşturabilirsiniz.
İlk önce, sürükleyeceğimiz öğeyi HTML ile oluşturuyoruz:
```html

```
Burada div etiketi kullanarak bir öğe oluşturduk ve id'si \"dragElement\" olarak tanımladık. Bu öğeyi sürükleyeceğiz. Şimdi, bu öğeyi sürüklenip bırakılacak alana yerleştirmemiz gerekiyor. Bunun için açıklama olarak şu HTML kodunu kullanabiliriz:
```html

```
Burada da div etiketi kullanarak bir öğe oluşturduk ve id'sini \"dropArea\" olarak tanımladık. Bu alana sürüklendiğinde öğeyi bırakacağız.
Şimdi JavaScript kodunu kullanarak bu iki öğe arasında sürükle bırak işlemini gerçekleştirebiliriz. Aşağıdaki kod sürükleme işlemini yapacak:
```javascript

```
Bu kodun açıklaması şöyle:
- İlk önce, sürükleyeceğimiz öğeyi \"dragElement\" adlı bir değişkene kaydediyoruz.
- dragElement.draggable özelliğini true olarak ayarlıyoruz, böylece öğe sürüklenebilir hale geliyor.
- \"dragstart\" olayına bir olay dinleyici ekliyoruz. Bu olay, öğenin sürüklenmeye başladığı anda tetiklenir.
- setData yöntemi, sürükleme işlemi sırasında taşınan verileri tanımlar. Burada \"text/plain\" veri türünü ve sürüklenen öğenin \"id\" özelliğini tanımlıyoruz.
Şimdi, sürüklenen öğeyi hedef alan alana bırakılması gerekiyor. Aşağıdaki kod bu işlemi gerçekleştirir:
```javascript

```
Bu kodun açıklaması şöyle:
- İlk önce, sürüklenen öğenin bırakılacağı hedef alanı \"dropArea\" adlı bir değişkene kaydediyoruz.
- \"dragover\" olayına bir olay dinleyici ekliyoruz. Bu olay, öğe bırakılmadan önce hedef alanın üzerinde gezinirken tetiklenir. Burada preventDefault yöntemi ile varsayılan davranışı engelliyoruz.
- \"drop\" olayına bir olay dinleyici ekliyoruz. Bu olay, öğe bırakıldığında tetiklenir.
- getData yöntemi, öğenin hangi sürükleme verilerini taşıdığını belirtir. Bu verileri kullanarak bırakılan öğeyi tanımlıyoruz.
- appendChild yöntemi, taşınan öğeyi hedef alanın içine yerleştirir.
Örnekler
Bu konu hakkında değişik örnekler vererek, HTML kodlama konusuna yeni başlayanların konuyu daha iyi anlamalarına yardımcı olabiliriz. İşte iki farklı örnek:
1. Resim Galerisi
Aşağıdaki HTML kodu, basit bir resim galerisi oluşturmamıza yardımcı olur:
```html


```
Burada, resimleri sürükleyip bırakacağımız alanın id'si \"dropArea\" olarak belirlendi. Resimleri sürükle & bırak işleminden geçirebilmek için class özelliğinde \"drag-and-drop\" eklendi. Şimdi, yukarıdaki JavaScript kodunu kullandığımızda, resimleri sürükleyebilir ve \"dropArea\" alanına bırakabiliriz.
2. Liste Elemanları
Aşağıdaki HTML kodu, basit bir sıralama işlemine yardımcı olur:
```html

• Lorem ipsum dolor


• Sit amet consectetur


• Adipisicing elit


• Sed do eiusmod

```
Burada, sürükleme işlemi için \"sortable\" adlı bir öğe ve sıralanacak liste öğeleri \"li\" kullanıldı. Bu örnekte, sürüklenen öğeleri bırakacağımız alanın belirtilmesine ihtiyaç yok. Ayrıca, sıralama işlemi için yeterli olacak temel bir JavaScript kodu da kullanabiliriz.
```javascript

```
Bu kodda, öğelerin sıralanmasına yardımcı olacak özelliklere sahip bir dizi öğe tanımladık. Daha sonra, her öğe için sürükleme özelliklerini etkinleştiriyoruz. \"dragstart\", \"dragover\" ve \"drop\" olaylarını tanımlarız ve son olarak sırayı değiştirme işlemi gerçekleştiririz.
Sık Sorulan Sorular
S: Sürükleme işlemi yalnızca JavaScript kullanarak mı gerçekleştirilir?
C: Evet, sürükleme işlemi yalnızca JavaScript kullanılarak gerçekleştirilir.
S: Sürükleme işlemi kullanılan web tarayıcıları hangileridir?
C: Sürükleme işlemi modern web tarayıcılarında desteklenir. Google Chrome, Mozilla Firefox, Microsoft Edge gibi tarayıcılarda rahatlıkla kullanılabilir.
S: Bir öğeyi diğer bir nesneye sürüklemek için başka bir tür etiket kullanabilir miyiz?
C: Evet, taşınacak öğeyi tanımlayan birden çok etiket kullanabilirsiniz. Önemli olan şey, öğenin sürüklenmesini sağlayan bir özellik eklemektir. Bu özellik, öğenin taşınabilir olduğunu belirler.