Photo by Sid Balachandran on Unsplash

React ile Admin Tool Geliştirelim — Drag-Drop (Sürükle-Bırak)

React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.

Not: Bu yazı daha önce yazılan bir serinin parçası olduğu için, önceki yazılara bu adresteki Admin Tool Mekanikleri başlığı altından ulaşabilirsiniz.

Bir önceki yazıda Listeden Seçim sırasında Drag-Drop (Sürükle-Bırak) harici yetenekleri gerçekleştirmiştik.

Liste Seçiminde Biten İşler

ListItem ları seçip aktarmak yerine herkesin dokunmatik ekrandan alışık olduğu Drag-Drop yöntemi ile bu aktarım işlemini yapmak istersek, bu işlemi nasıl gerçekleştireceğiz.

Bunun için hazırda kütüphane var mı diye baktığımda, bir kaç seçenek içerisinden Atlassian geliştirdiği React Beatiful Dnd popüler olarak kullanıldığını gördüm. Proje içerisinde bu kütüphaneyi kullanmaya karar verdim.

yarn add react-beautiful-dnd

Drag-Drop yapısı mevcut örneği karmaşıklaştırdığı için onu ayrı bir sayfa üzerindeki örnek ile göstermeyi düşündüm. Bunun için yine bir Drag-Drop sayfası boş sayfası oluşturalım.

Bu örnekte Task üzerinden bu seçim işlemini gerçekleştirelim.

Boş Task Sayfası

Bu örnekte https://codesandbox.io/s/ql08j35j3q bu uygulamadan faydalanacağız.

Bu uygulamada yapmak istediğimiz. Bir Taskboard InProgress ve Completed listeleri arasında Drag-Drop yöntemi ile Task taşımak veya kendi içerisinde sırasını değiştirmek istiyoruz.

Drag-Drop Wireframe

Bu yapı için TaskBoard , InProgressColumn, CompletedColumn ve Task bileşenlerine ihtiyacımız var.

Önce Taskboard geliştiriyoruz. Bu yapının içerisinde önce DragDropContext tanımlayıp bunlar içerisinde InProgress ve Completed Column tanımlıyoruz.

TaskBoard

Şimdi sıra InProgress ve Completed Column gerçekleştirmekte. Bu yapılar 2 katman üzerinde duruyor;

  • Column yapısı→ Droppable
  • Column içerisindeki Task → Draggable
InProgress ve Completed Columns

Şimdi nasıl çalıştığına bakalım. Item3 Drag-Drop (Sürükle-Bırak) ile Completed kolonuna taşıyalım.

Drag-Drop Deneme..

GitHub Kod Örneği

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