React ile Drag & Drop Uygulaması Nasıl Yapılır

React, kullanıcı arayüzleri oluşturmak için çok popüler bir JavaScript kütüphanesidir. Drag & Drop (sürükle ve bırak) özelliği, modern web uygulamalarında sıkça kullanılan bir etkileşim şeklidir. Bu makalede, React ile Drag & Drop uygulaması oluşturmanın temel adımlarını inceleyeceğiz.

React ile Drag & Drop Nedir?

Drag & Drop, kullanıcıların web sayfasında öğeleri sürüklemesine ve bırakmasına olanak tanır. Bu etkileşim, kullanıcı deneyimini artırarak, görsel geri bildirim sağlar. React bu özelliği kolayca uygulamak için bazı yardımcı bileşenler ve kütüphaneler sunar.

React DnD Kütüphanesi

React uygulamalarında Drag & Drop işlemlerini yönetmek için en popüler kütüphanelerden biri React DnD'dir. Bu kütüphane, sürükleme ve bırakma işlemlerini kolayca entegre etmenizi sağlar.

Örnek Uygulama

Aşağıda, basit bir Drag & Drop uygulamasının nasıl oluşturulacağını gösteren bir örnek bulunmaktadır.

import React from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const ItemType = 'ITEM';

const DraggableItem = ({ item }) => {
    const [{ isDragging }, drag] = useDrag({
        type: ItemType,
        item: { id: item.id },
        collect: (monitor) => ({ isDragging: monitor.isDragging() }),
    });

    return 
{item.text}
;
};

const DropZone = ({ onDrop }) => {
    const [, drop] = useDrop({
        accept: ItemType,
        drop: (item) => onDrop(item.id),
    });

    return 
Drop here
;
};

const App = () => {
    const handleDrop = (id) => {
        console.log(`Dropped item with id: ${id}`);
    };

    return (
        
            
            
        
    );
};

export default App;

Yukarıdaki kod örneğinde, DraggableItem bileşeni sürüklenecek öğeyi tanımlar, DropZone bileşeni ise öğenin bırakılacağı alanı temsil eder. onDrop fonksiyonu, bırakılan öğenin kimliğini işler.

Sonuç

React ile Drag & Drop özelliği eklemek, uygulamanızın kullanıcı etkileşimini önemli ölçüde artırabilir. Bu makalede, temel bir örnek ve React DnD kütüphanesi hakkında bilgi verdik. Daha karmaşık uygulamalar geliştirmek için kütüphanenin dökümantasyonuna ve örneklerine göz atabilirsiniz.