WEB API
Web Events (Drag and Drop)
Mouse ile Drag & Drop (Sürekle Bırak) yöntemi ile bir çok farklı UI çalışma mekanizması oluşturabilirsiniz, bunun için Mouse seviyesinde bir HTML element basıldığını, basılarak sürüklendiğini, bir başka HTML element içerisine bırakıldığını ve bu sürüklenme süresince bir görselin taşınma hissinin verilmesi gibi eventlere sağlanıyor olması gerekir bunu sağlayan API ye Web DnD API denir.
Bu yazı daha önceden başlamış olduğum Web API yazı serisinin devamı niteliğindedir. JS kodları ile işletim sistemi veya tarayıcının native kısımlarına erişmek için sağlanan API’ler olduğundan bahsetmiştim. DnD API’de mouse ve DOM elemanları üzerinden kurulan sürükle-bırak API’sidir.
Bu API’nin üzerine bir çok UI bişelen kütüphanesi wrap ederek kendi UI bileşen kütüphanelerini oluşturmuştur.
- JQuery UI ile Interactions(Draggable, Droppable, Resizable, Sortable ..),
- React Dnd, Vue Dnd, Material UI Drag and Drop gibi birçok
Biz burada en basit haliyle JS’de Drag-Drop nasıl çalıştığını analiz etmeye çalışacağız. DnD(Drag And Drop) Web Events mekanizması üzerine çalışan bir mekanizmadır. Bu konuyu daha iyi anlamak için Web Events yazımı okumanızı öneririm.
Aşağıda sürükle-bırak kontrol edebilmek için listener takabileceğiniz eventleri görüyorsunuz. drag, dragend, dragenter, dragstart,dragleave, dragover ve drop
Konunun daha iyi bir şekilde anlaşılması için linkteki örnek üzerinden ilerliyor olacağım. Kod temelde şunu yapıyor olacak
- Beyaz div alanı sürüklenebilecek.
- Sürüklenme esnasında arkaplan transparent olacak (Çünkü üzerinden geçilen nesneleri görebilelim.
- Bırakılabilecek bir hedefin üzerine gelince hedefin arkaplan rengi değişecek.
- Hedefin üzerine bırakılınca div artık yeni ortamına taşınmış olacak.
Bunun için elimizde .dropzone hedef alanları ve taşınabilen #draggable nesnemiz bulunuyor.
Elimizdeki kodu incelediğimizde drag, dragstart, dragend listener callback target taşınan nesne ve
- dragstart : taşınacak nesne dragged değişkenine atanıyor ve arkaplan rengi transparent hale getiriliyor
- dragend: taşınan nesnenin arkaplan rengi eski haline getiriliyor.
2nci kod kısmı üzerine bırıkakılabilecek hedef nesnelerden gelen sesler, eventler. dragover, dragenter, dragleave ve drop
- dragover: varsayılan herhangi bir davranışta bulunmaması için event.preventDefault() çağrılmış.
- dragenter: taşınan nesnenin olası bırakılabilecek bir container alanına girmesi durumunda bunun arkaplanı mor rengine dönüştürülür.
- dragleave: taşınan nesnenin olası bırakılabilecek bir container çıkması durumunda bunun arkaplanı eski rengine dönüştürülür.
- drop: artık sürüklenen nesne bırakılmıştır. Eğer olası bırakılabilecek bir alan üzerinde ise dragged nesne önceki parent(atasından) kopartılarak yeni atasına eklenir.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
