Herkese merhabalar; 

Modern uygulamaların artık vazgeçilmezi haline gelen sürükle bırak tarzı bileşenler hem kullanıcı deneyimi açısından hem de kolaylık açısından bizlere katkılar sunuyor.

Trello'yu veya Wix gibi web sitesi oluşturucuları düşünün. Kullanıcılar için kolay ve sezgisel hale getiren sürükle ve bırak öğelerine sahiptirler.

Bu yazımızda React uygulamamızda Sürüklenebilir yani Sürükle Bırak bileşenler nasıl oluşturacağız onu göreceğiz. 
Bunun için gerekli olan uygulama npm paketi :  react-draggable package.

1. Adım: npm paketini kurulumu

npx create-react-app my-app ile React uygulamanızı oluşturduktan sonra aşağıdaki satırı çalıştırın.

npm install react-draggable

2. Adım: Sürüklenebilir Bileşen Ekleme

App.js içerisinde sürüklenebilir öğe için aşağıdaki satırı çağırın.

import Draggable from 'react-draggable';

Ardından sürüklenmesini istediğiniz öğeyi şu şekilde belirtiyoruz:

<Draggable>
    <div className="box">
        <div>Move me around!</div>
    </div>
</Draggable>

Aşağıdakilere biraz CSS ekleyebiliriz: ( .box  CSS Class )

.box {
  position: absolute;
  cursor: move;
  color: black;
  max-width: 215px;
  border-radius: 5px;
  padding: 1em;
  margin: auto;
  user-select: none;
}

İşte Sonuç :

drag.gif

Buradan yola çıkarak sizde uygulamalarınızda sürüklenebilir öğleler oluşturabilirsiniz. Hatta bu konuyu biraz daha ileriye taşıyabilirsiniz. Geliştirmek size kalmış... İyi kodlamalar...