Photo by Victoria Chen on Unsplash

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.

Draggable Sidebar Örneği

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.

Draggable Code

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store