React İle Drag And Drop Özellikli Bir Görev Yönetim Paneli Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projemizi geliştirmek için React 19 ve üzerinde, sürükle-bırak işlemleri için endüstri standardı haline gelen @dnd-kit kütüphanesini kullanacağız. Eski yöntem olan react-beautiful-dnd artık güncel React sürümleriyle tam uyumlu olmadığı için bu modern kütüphaneyi tercih ediyoruz.

• Node.js (LTS sürümü)
• React 19 veya üzeri bir proje
• @dnd-kit/core, @dnd-kit/sortable ve @dnd-kit/utilities paketleri

Projenizi başlatmak için terminalinizde şu komutları çalıştırarak gerekli bağımlılıkları yükleyebilirsiniz:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Bu paketler, sürükleme algılama, sıralama mantığı ve yardımcı fonksiyonları içeren modüler bir yapı sunar. Kurulum tamamlandıktan sonra projenizin package.json dosyasında ilgili bağımlılıkların göründüğünden emin olun.

Görev Veri Yapısını Oluşturma

Görev yönetim panelimizin temelini, görevlerimizi tutan bir state yapısı oluşturur. Her görevin benzersiz bir kimliği (id) ve bulunduğu sütunu belirten bir durumu olmalıdır. Veri yapısını basit tutmak, sürükleme işlemlerinde performans kaybını önler.

const [tasks, setTasks] = useState([
  { id: '1', title: 'Projeyi Başlat', status: 'todo' },
  { id: '2', title: 'API Entegrasyonu', status: 'in-progress' },
  { id: '3', title: 'Testleri Yaz', status: 'done' }
]);

Bu veri yapısı, görevlerinizi yönetmek için merkezi bir kaynak görevi görür. id alanı, @dnd-kit kütüphanesinin sürüklenen öğeyi benzersiz bir şekilde tanımlaması için zorunludur.

Sürükle-Bırak Sağlayıcısını Yapılandırma

Sürükleme işlemlerinin gerçekleşebilmesi için tüm bileşenlerimizi DndContext ile sarmalamamız gerekir. Bu bağlam (context), sürükleme olaylarını (drag start, drag over, drag end) dinlememize olanak tanır.

import { DndContext, closestCenter } from '@dnd-kit/core';

function App() {
  return (
    
      

        {/* Sütunlar buraya gelecek */}
      
    
  );
}

collisionDetection özelliği, sürüklenen öğenin hangi hedefin üzerine bırakıldığını hesaplamak için kullanılır. closestCenter algoritması, en yakın merkez noktasına göre hedefi belirler ve en tutarlı sonuçları verir.

Görevleri Sürüklenir Hale Getirme

Bir bileşeni sürüklenebilir kılmak için useDraggable kancasını (hook) kullanırız. Bu kanca, bileşene sürükleme yeteneklerini ve gerekli event listener'ları ekler.

import { useDraggable } from '@dnd-kit/core';

function Task({ id, title }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({ id });
  
  const style = transform ? {
    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
  } : undefined;

  return (
    

      {title}
    
  );
}

transform değeri, sürükleme sırasında öğenin görsel olarak yer değiştirmesini sağlar. setNodeRef ise kütüphanenin DOM üzerindeki öğeyi takip etmesini sağlayan referanstır.

Sürükleme Sonrası Durum Güncelleme

Sürükleme işlemi bittiğinde, veriyi güncellemek için onDragEnd fonksiyonunu kullanırız. Bu fonksiyon, sürüklenen öğenin yeni konumunu ve hedef sütununu belirler.

const handleDragEnd = (event) => {
  const { active, over } = event;
  if (!over) return;

  if (active.id !== over.id) {
    setTasks((items) => {
      // Burada state güncelleme mantığı (array reordering) uygulanır
      return items; 
    });
  }
};

Bu aşamada, active.id sürüklenen görevi, over.id ise bırakılan yeri temsil eder. Eğer over değeri null ise, kullanıcı öğeyi boş bir alana bırakmış demektir ve işlem iptal edilmelidir.

React Drag and Drop Kütüphane Karşılaştırması

Güvenlik Uyarısı: Sürükle-bırak panellerinde kullanıcı verilerini güncellerken, API uç noktalarınızda mutlaka yetkilendirme (authentication) kontrolü yapın. Sadece sürükleme işleminin başarılı olması, verinin veritabanına güvenli bir şekilde yazıldığı anlamına gelmez.

Sıkça Sorulan Sorular

Sürükleme sırasında öğe titriyor, neden?

Bu genellikle CSS transform özelliklerinin çakışmasından veya z-index sorunlarından kaynaklanır. @dnd-kit tarafından sağlanan stil nesnesini doğrudan öğeye uyguladığınızdan emin olun.

Dokunmatik cihazlarda sürükleme çalışmıyor?

@dnd-kit varsayılan olarak fare olaylarını dinler. Dokunmatik ekran desteği için sensors yapılandırmasını kullanarak PointerSensor ve TouchSensor eklemeniz gerekir.

Veri kalıcılığını nasıl sağlarım?

onDragEnd fonksiyonu tetiklendiğinde, güncellenen state'i bir backend API'sine fetch veya axios ile POST/PATCH isteği atarak kaydetmelisiniz.

Büyük listelerde performans sorunu olur mu?

Listeleriniz çok uzunsa React.memo kullanarak sadece değişen öğelerin render edilmesini sağlayın. @dnd-kit zaten yüksek performanslı bir kütüphanedir, ancak gereksiz re-render'lardan kaçınmak önemlidir.

Sürükleme sırasında bir "hayalet" (ghost) öğe nasıl oluşturulur?

DragOverlay bileşenini kullanarak, sürükleme sırasında imlecin altında görünen özel bir bileşen render edebilirsiniz.

İleri Seviye Özelleştirme: Sürükleme Görsellerini Dinamikleştirme

Standart sürükleme deneyimini daha profesyonel hale getirmek için sürüklenen öğenin (drag overlay) görünümünü, bırakılacağı hedefe göre dinamik olarak değiştirebilirsiniz. Bu, kullanıcıya işlemin başarılı olup olmayacağına dair görsel bir geri bildirim sağlar.

@dnd-kit içerisinde DragOverlay bileşenini kullanarak, sürükleme anında aktif olan öğenin durumunu takip edebilir ve buna göre CSS sınıfları atayabilirsiniz.

import { DragOverlay, useDndContext } from '@dnd-kit/core';

function CustomDragOverlay() {
  const { active } = useDndContext();

  if (!active) return null;

  return (
    
      

        {active.data.current?.title}
      
    
  );
}

Sürükle-Bırak İşlemlerinde Performans Optimizasyonu

Görev yönetim paneliniz büyüdükçe, her sürükleme hareketinde tüm listenin yeniden render edilmesi performans sorunlarına yol açabilir. React'in memo ve useMemo kancalarını kullanarak bu maliyeti minimize etmelisiniz.

Bileşen Bazlı Optimizasyon Stratejileri

• React.memo Kullanımı: Görev kartlarını React.memo ile sarmalayarak, yalnızca ilgili kartın verisi değiştiğinde yeniden render edilmesini sağlayın.
• Referans Yönetimi: useCallback kullanarak sürükleme event handler'larını sabitleyin, böylece alt bileşenlere gereksiz prop geçişini engelleyin.
• Virtualization: Eğer yüzlerce görev içeren bir listeniz varsa, react-window veya react-virtuoso gibi kütüphaneleri sürükle-bırak yapısı ile entegre ederek sadece ekranda görünen öğelerin render edilmesini sağlayın.

import React, { memo } from 'react';

const TaskCard = memo(({ task }) => {
  return (
    

      {task.content}
    
  );
});

export default TaskCard;

Hata Ayıklama ve Geliştirici Deneyimi

Sürükle-bırak süreçlerinde en sık karşılaşılan hatalar genellikle id çakışmaları veya geçersiz droppable alan tanımlarıdır. Geliştirme aşamasında bu hataları hızlıca tespit etmek için aşağıdaki kontrolleri yapmalısınız:

1. Benzersiz ID Kontrolü: Tüm görevlerin ve sütunların id değerlerinin uygulama genelinde benzersiz olduğundan emin olun.
2. Sensör Hataları: Dokunmatik cihazlarda PointerSensor kullanırken, sürükleme başlangıcı için activationConstraint parametresini ayarlayarak tıklama ile sürükleme arasındaki farkı belirleyin.
3. Konumlandırma Hataları: Eğer sürüklenen öğe ekranın dışında kalıyorsa, CSS'te position: fixed veya absolute değerlerinin doğru hesaplandığını kontrol edin.

const sensors = useSensors(
  useSensor(PointerSensor, {
    activationConstraint: {
      distance: 8, // 8 piksel hareket etmeden sürüklemeyi başlatma
    },
  }),
);

İpucu: Sürükleme sırasında oluşan "titreme" sorunlarını gidermek için @dnd-kit içerisindeki SortableContext kullanırken, öğelerin transition özelliklerini CSS ile yumuşatmayı unutmayın.

Sonuç

React ile sürükle-bırak özellikli bir görev yönetim paneli oluşturmak, kullanıcı etkileşimini bir üst seviyeye taşır. @dnd-kit kütüphanesi ile modern, erişilebilir ve performanslı bir yapı kurduk. Bu rehberdeki adımları takip ederek kendi projelerinize sürükle-bırak yetenekleri kazandırabilirsiniz.

Bir sonraki adım olarak, sürüklenen öğelerin veritabanı ile senkronizasyonunu sağlamak için Optimistic UI (iyimser arayüz) güncellemelerini araştırmanızı öneririm. Bu sayede kullanıcı, sunucudan yanıt gelmesini beklemeden arayüz değişikliğini anında görebilir.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce hata yönetimi (error handling), yükleme durumları (loading states) ve veri doğrulama (data validation) süreçlerini projenize entegre etmeyi unutmayın.