Frontend Kapsam
React Dnd (Drag and Drop) Kütüphanesi
Bugünkü yazımda Drag And Drop için React’da kullanılan React Dnd Kütüphanesinden bahsediyor olacağım.
Drag and Drop kavramı WebAPI içerisinde sağlanan bir yapı bu konuda daha önceden bir blog yazısı yazmıştım. Bu yazıda direk Web API’deki drag-drop yapısını kullanıyorduk.
Bunun için React’ın özel Declerative ve Hooklardan faydalanabildiğiniz React Dnd kütüphanesi bulunuyor. Ben bunun için ufak bir örnek hazırladım ve zaman içerisinde örneklerimi genişletmeyi düşünüyorum.
Aşağıdaki SideBar köşe noktasınından tutarak genişletebilir veya daraltabilirsiniz.
Bu işlemi yapabilmek için Sidebar kenarına ufak bir çizgi şeklinde bir düğme ekleyip bu düğmeye Draggable özelliği verdik bu sayede aslında sadece o çizgi şeklinde styling gerçekleştirdiğimiz düğmeyi oynatırken arkaplanda layout calculation gerçekleştiriyorum.
Not:
Bu yazı halen geliştime aşamasındadır, yeni drag-drop yenetekleri ekledikçe bu yazıyı güncelleyeceğim.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
