Reaktör ünlü bir kullanıcı arayüzü (UI) JavaScript kütüphanesidir. Sosyal medya uygulamalarından, e-ticaret platformlarından, bloglardan, bloglardan gelen farklı web uygulamaları oluşturmak için Reak kütüphanesini kullanabilirsiniz. tek sayfa uygulamaları , içerik yönetim sistemleri (CMS), Dashboards ve veri görselleştirmeleri, birkaçdan bahsetmek için.

Geliştiriciler çeşitli kütüphaneler ve çerçeveler kullanarak Reakt uygulamalarının işlevselliğini genişletebilir. Bu tür kütüphaneler farklı sınıflara gruplanabilir; Drag-and-Drop oldukça popüler olan bir kütüphane kategorisidir.

Drag ve Drop işlevselliği, bir kullanıcının ekranda bir element seçmesine izin veren bir UI etkileşimidir, onu sürükleyin ve başka bir bileşende bırakın. Bu işlevselliğin mükemmel bir örneği, istenen konumunuza öğeleri sürükleyerek bir listedeki öğeleri yeniden düzenlemektedir.

Ayrıca aşağıdaki durumlarda Drag-and-Drop işlevselliğini kullanabilirsiniz;

• Dosya yükleme: Kullanıcılar, makinelerini seçmek ve dosyaları yüklemek için kaydırmak yerine dosyaları sürükleyebilir ve bırakabilirler.
• Kanban tahtaları: Kullanıcıların aktivite seviyelerine veya aşamalara bağlı olarak eşyaları sürükleyebileceği bir pano oluşturabilirsiniz.
• Resim galerileri: Kullanıcıların yükleyebilir ve yeniden düzenleyebildiği bir görüntü galerisine sahip olabilirsiniz.
• Widgets: Kullanıcılar uygulamanın görünüşünü sürükleyerek ve pencereleri düşürerek özelleştirebilir.
• Alışveriş arabası: Kullanıcılar bir öğeye tıklayarak, onu sürükleyin ve onu arabaya bırakabilirler. Bir Reakt Drag ve Drop kütüphanesi, geliştiricilerin Drag ve Drop işlevselliğini reaktör uygulamalarında uygulamalarına izin veren önceden inşa edilmiş bileşenlerdir.

Bu kütüphaneler yeniden kullanılabilir bileşenlerle gelir, geliştiricilerin sürüklenebilecek ve bırakılabilecek unsurları yaratmasına izin verir. Kütüphaneler, sürüklenmek gibi farklı olayları ele alır, sürüklenir ve bırakın.

Drag ve Drop kütüphaneleri daha iyi UI etkileşimlerine nasıl yardımcı olacaktır

• Geliştirilmiş kullanıcı deneyimi: drag-and-drop işlevselliği, kullanıcıların bir uygulama ile etkileşim kurma sezgisel bir yaklaşımdır. İçerileme ve parçalanma yerine öğeleri sürükleme seçeneği, manuel olarak interaktif ve sorunsuz bir etkileşim sağlar.
• Basitleştirilmiş akışlar: Bilgisayarınızın farklı yerlerinden dosyaları bir uygulamaya yüklemek yerine, onları sürükleyebilir ve bırakabilirsiniz.
• Artan verimlilik: Drag-and-drop işlevselliği zaman tasarrufu sağlar, kullanıcıların daha üretken olmasını sağlar.
• Mobil cihazlar için uygun: Akıllı telefonlar ve tabletler gibi mobil cihazlar sınırlı ekran alanı vardır. Kullanıcılar genellikle navigasyon için jestlere güveniyor, ki bu da sürükleniyor ve harika bir ek sağlıyor.
• İlgilenen arayüzler sağlar: Drag-and-drop işlevselliği uygulamanızın kullanıcı arayüzüne görsel çağrı ekleyebilir. Uygulamada geri bildirimler veren veya tanımlayan animasyonlar ekleyebilir ve öğeleri kaldırabilirsiniz. Bunlar en iyi Drag ve Drop Reaction kütüphaneleridir:

DnD

DnD Karmaşık drag-and-drop arayüzleri oluşturmak için bir dizi reaktör hizmetidir. Bu kütüphane, Trello’ya benzer uygulamaları oluşturmak ve Storify, sürükle-ve-drop işlevselliğinin de veri aktarımını içerir.

Kurulum;

npm install react-dnd react-dnd-html5-backend

Reaktör DnD’yi reaktör bileşeninize aktarabilirsiniz;

1

import { useDrag } from 'react-dnd'

Key Özellikler

• bileşenleriniz ile çalışır: Bu kütüphane hazır öğeler sağlamaz. Bununla birlikte, bileşenlerinizi toplar ve enjektelerinizi onlara dönüştürür.
• Extensible: Reak DnD kütüphanesini kullanırken fare olaylarına veya dokunma olaylara dayanan özel bir geri dönüş ekleyebilirsiniz.
• Test edilebilir: Reak DnD kodunu test etmek için Jest veya Enzyme kullanabilirsiniz.
• Touch support: DnD touch backend Bu kütüphaneye dokunabilir. Reak DnD ücretsiz, açık kaynaklı bir kütüphanedir.

React Draggable

React Draggable Henüz basit ama güçlü Sürüklenebilir elementler oluşturmak için onu kolaylaştıran reaktör kütüphanesi.

Kurulum;

npm install react-draggable

Reaksiyon Draggable’ı kullanmak için, Reaksiyon bileşeninizde olduğu gibi ithalat.

1

import Draggable from 'react-draggable';

Özellikler Özellikler Özellikler Özellikler

• Yükleme ve yapılandırma için kolay: Sadece kütüphaneyi başlatmanız ve ithal etmeniz gerekir. Ayrıca kütüphaneden bireysel bileşenleri de ithal edebilirsiniz.
• vanilya JavaScript ve Reaktör ile uyumlu: Takip ettiği gibi düz JavaScript ile React Draggable kullanabilirsiniz;

1

let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;

• Diğer reaktör kütüphaneleri ile uyumlu: Reakt Draggable’ı diğer kütüphanelerle kullanabilirsiniz, örneğin Reak Grid Layout. Reakt Draggable ücretsiz, açık kaynak Drap ve Drop Reaks kütüphanesidir.

Returnzone

Returnzone HTML-5-compliant drag-and-drop alanı dosyaları için oluşturmak için basit bir React Hook.

Kurulum;

npm install --save react-dropzone

Veya:

yarn add react-dropzone

Daha sonra bu kütüphaneyi aşağıdaki gibi ithal edebilirsiniz;

1

import {useDropzone} from 'react-dropzone';

Özellikler Özellikler Özellikler Özellikler

• Styling Dropzone: Bu kütüphane herhangi bir stil kuralı oluşturmaz ve böylece bileşenlerinize uygun gördüğünüz gibi stilebilirsiniz.
• Kullanıcıların kabul edilebilir dosya türlerini tanımlamalarına izin verin: Dropzone’a kabul edilen veya kabul edilen teklifi sağlayarak belirli dosya türlerini kabul etmek için talimat verebilirsiniz.
• Özel geçerliliği kabul eder: Geçerliator prop, farklı dosyalar için özel geçerliliği belirtmenize izin verir. Reaktör Dropzone ücretsiz, açık kaynak Drag ve Drop Reaction kütüphanesidir.

React Grid Layoutoutout

React Grid Layoutoutout Resizeable ve sürüklenebilir bir grid düzenidir.

Kurulum;

npm install react-grid-layout

Bu kütüphaneyi aşağıdaki gibi ithal edebilirsiniz;

1

import GridLayout from "react-grid-layout";

Özellikler Özellikler Özellikler Özellikler

• Bağımlılıklara bağlı : React Grid Layout tamamen Reakt üzerinde inşa edilmiş ve JQuery’den ücretsiz.
• Resizable widgets : drag-and-drop özelliğinin başında, bileşenleri de yeniden şekillendirebilirsiniz.
• Sorumluluk kırıcı noktalar: Kütüphane her mola noktası için ayrı bir düzen sunar.
• Özelleştirilebilir: Tüm ızgarayı yeniden inşa etmeden öğeleri ekleyebilir veya kaldırabilirsiniz. React Grid Layout ücretsizdir, açık kaynaklı bir reaktör kütüphanesidir.

Reaks

Reaks Reaktör için sürükleyici ve resiz bir bileşendir.

Kurulum;

npm i -S react-rnd

Ya da

yarn add react-rnd

Özellikler Özellikler Özellikler Özellikler

• Basit: Reaktif rnd basit ama çok güçlü olmak için tasarlanmıştır.
• Hem TypeScript hem de JavaScript ile uyumlu: JavaScript veya TypeScript ile yapılandırdığınıza bakılmaksızın uygulamanızla Reaktif rnd kullanabilirsiniz.
• Destekler Yeniden Bağışladı : İhtiyaçlarınıza uygun olarak Resize Rnd kullanarak yaratılan bileşenleri kolayca yeniden şekillendirebilirsiniz. Reaktif rnd ücretsiz, açık kaynaklı reaktör kütüphanesidir.

Reaksiyon Sanallaştırma

Reaksiyon Sanallaştırma Yeniden inşa edilmiş sanallaştırma diskleri olan bir sürükle-ve-drop Reaks çerçevesidir.

Kurulum;

npm install --save react-virtualized-dnd

Reaktör Sanallaştırmayı da yapabilirsiniz;

1

import ExampleBoard from 'react-virtualized-dnd';

Özellikler Özellikler Özellikler Özellikler

• Seçmek için bileşenlerin çeşitliliği: Parçalar “Fixed Height”, “Variable Height” ve “Grupable Droppables” olarak adlandırılır.
• Özelleştirilebilir: İhtiyaçlarınıza uygun olarak Reaktif Virtualized dnd’dan bileşenleri özelleştirebilirsiniz. Reaktör Virtualized dnd, kaynak kodu GitHub’da barındırılan açık kaynaklı bir reaktör çerçevesidir.

Reaksiyon Movable

Reaksiyon Movable Listeler ve masalar için sürüklenme Kılavuzu kütüphanesidir.

Kurulum;

yarn add react-movable

Bu kütüphaneyi de ithal edebilirsiniz;

1

import { List, arrayMove } from 'react-movable';

Özellikler Özellikler Özellikler Özellikler

• Seçilecek çeşitli sürüklenme seçenekleri: Kütüphaneden seçim yapmak için farklı sürüklenme bileşenleri için kazan plaka kodları vardır.
• Hafif kütüphane: Rejim Movable JQuery gibi bağımlılıklara sahip değildir. 4kB’den daha az (gzipped).
• Unopiniated Style: Reaktör Movable, uygulamanızı nasıl stilize etmek istediğinizi kontrol etmez.
• Touch support: Bu kütüphane, akıllı telefonlarda, tabletlerde ve dokunma işlevleri olan herhangi bir cihazda kullanılan uygulamaları yaratır.
• TypeScript’ta yazılı: Tipleri kodunuza tanıtabilirsiniz, JavaScript’te olmayan bir işlevsellik. Reaksiyon Movable ücretsiz, açık kaynaklı reaktör kütüphanesidir.

Draggable

Draggable Bir drag-and-drop Geliştiricilerin yerel tarayıcı olaylarını kapsamlı bir API’ye özetleyerek sürüklenme olayları yaratmasına izin veren bir kütüphane.

Kurulum;

npm install @shopify/draggable --save

veya ip aracılığıyla:

yarn add @shopify/draggable

Reakt uygulamanıza Draggable’i ithal edebilirsiniz;

1

import { Draggable } from '@shopify/draggable';

Özellikler Özellikler Özellikler Özellikler

• Categorized components: Kullanımı gereken tam bileşeni bulmak, bileşenler kategorize edildiği kadar kolaydır. Bu bileşenler özelleştirilebilir.
• Büyük tarayıcılarla uyumlu: Draggable’ı Google Chrome, Mozilla Firefox ve Apple Safari gibi tarayıcılarla kullanabilirsiniz.
• Destekler TypeScript: Bu kütüphane ile çalışırken, TypeScript tanımlarını kodunuza ekleyebilirsiniz.
• Destekler eklentiler: Draggable’in işlevselliğini eklentilerle ekleyebilirsiniz Collidable ve SwapAnimation . Draggable, katkıda bulunanlar tarafından korunan ücretsiz, açık kaynaklı bir reaktör kütüphanesidir.

Seçici Drag seçmek için

Reakt drag-to-select Uygulamanıza sürüklenmek için kullanabileceğiniz bir reaktör kütüphanesidir.

Kurulum;

npm install --save @air/react-drag-to-select

Ya da

yarn add @air/react-drag-to-select

Bu kütüphaneyi uygulamanıza aşağıdaki gibi aktarabilirsiniz;

1

import { useSelectionContainer } from '@air/react-drag-to-select'

Özellikler Özellikler Özellikler Özellikler

• Basit: Bu kütüphane öğeleri seçmez. Ancak, kütüphane seçim kutusu çizir ve sizi koordinatlar verir.
• Destekler TypeScript: Reakt Drag-to-select kütüphanesi TypeScript’te yazılır, bu da TipScript ve JavaScript’te yazılmış Reakt uygulamaları ile kullanabilirsiniz.
• Destekler testi: Bu kütüphaneyi çoğu reaktör test çerçeveleriyle kullanabilirsiniz. React Drag-to-select, ücretsiz, açık kaynak kütüphanesidir.

React Dragula

React Dragula Basit bir drag-and-drop reaktör kütüphanesidir.

Kurulum;

npm install react-dragula --save

Ya da,

bower install react-dragula --save

Özellikler Özellikler Özellikler Özellikler

• Özelleştirilebilir: İhtiyaçlarınıza uygun olarak Reakt Dragula’dan bileşenleri özelleştirebilirsiniz.
• Destekler dokunuş: Bu kütüphaneyi akıllı telefonlar, tabletler ve diğer dokunmatik cihazlar üzerinde kullanılabilecek uygulamalar oluşturmak için kullanabilirsiniz.
• Hafif: Reakt Dragula’nın küçük bir paket büyüklüğü vardır, reaksiyon uygulamanızın küçük olmasını istiyorsanız mükemmel hale getirin. React Dragula özgür, açık kaynaklı bir kütüphanedir.

Sonuç Sonuç Sonuç

Şimdi bir sonraki reaktör uygulamanızda kullanabileceğiniz çeşitli Drag-and-Drop kütüphaneleri var. Kütüphane seçimi, bir sonraki uygulamanıza, tadınıza ve tercihlerinize sahip olmayı planladığınıza bağlı olacaktır.

Uygulamanız büyükse, farklı ihtiyaçlara hitap etmek için çoklu sürüklenme kütüphaneleri kullanabilirsiniz. Bu kütüphanelerin çoğu çeşitli ile uyumludur Reaksiyon test kütüphaneleri Gemi hatasız uygulamaları kolay hale getirin.

title: “10 En İyi Drag ve Drop Reaction Kütüphaneleri Effortless UI Interactions” date: “2023-10-30T05:03:01” draft: false description: “Kullanıcı etkileşimini sürüklenme-and-drop kütüphaneleri aracılığıyla geliştirebileceğinizi biliyor muydunuz? Aşağıdakiler bugün denemek için en iyi sürüklenme kütüphanelerinden bazılarıdır. " autor: “toto” image: “https://cdn.99tz.top/be55757c94/2023/04/b36e9b53426c491f8e4b341f873eba0a.webp" cover: “https://cdn.99tz.top/be55757c94/2023/04/b36e9b53426c491f8e4b341f873eba0a.webp" tags: [] categories: [‘Development’] theme: light

Reaktör ünlü bir kullanıcı arayüzü (UI) JavaScript kütüphanesidir. Sosyal medya uygulamalarından, e-ticaret platformlarından, bloglardan, bloglardan gelen farklı web uygulamaları oluşturmak için Reak kütüphanesini kullanabilirsiniz. tek sayfa uygulamaları , içerik yönetim sistemleri (CMS), Dashboards ve veri görselleştirmeleri, birkaçdan bahsetmek için.

Geliştiriciler çeşitli kütüphaneler ve çerçeveler kullanarak Reakt uygulamalarının işlevselliğini genişletebilir. Bu tür kütüphaneler farklı sınıflara gruplanabilir; Drag-and-Drop oldukça popüler olan bir kütüphane kategorisidir.

Drag ve Drop işlevselliği, bir kullanıcının ekranda bir element seçmesine izin veren bir UI etkileşimidir, onu sürükleyin ve başka bir bileşende bırakın. Bu işlevselliğin mükemmel bir örneği, istenen konumunuza öğeleri sürükleyerek bir listedeki öğeleri yeniden düzenlemektedir.

Ayrıca aşağıdaki durumlarda Drag-and-Drop işlevselliğini kullanabilirsiniz;

• Dosya yükleme: Kullanıcılar, makinelerini seçmek ve dosyaları yüklemek için kaydırmak yerine dosyaları sürükleyebilir ve bırakabilirler.
• Kanban tahtaları: Kullanıcıların aktivite seviyelerine veya aşamalara bağlı olarak eşyaları sürükleyebileceği bir pano oluşturabilirsiniz.
• Resim galerileri: Kullanıcıların yükleyebilir ve yeniden düzenleyebildiği bir görüntü galerisine sahip olabilirsiniz.
• Widgets: Kullanıcılar uygulamanın görünüşünü sürükleyerek ve pencereleri düşürerek özelleştirebilir.
• Alışveriş arabası: Kullanıcılar bir öğeye tıklayarak, onu sürükleyin ve onu arabaya bırakabilirler. Bir Reakt Drag ve Drop kütüphanesi, geliştiricilerin Drag ve Drop işlevselliğini reaktör uygulamalarında uygulamalarına izin veren önceden inşa edilmiş bileşenlerdir.

Bu kütüphaneler yeniden kullanılabilir bileşenlerle gelir, geliştiricilerin sürüklenebilecek ve bırakılabilecek unsurları yaratmasına izin verir. Kütüphaneler, sürüklenmek gibi farklı olayları ele alır, sürüklenir ve bırakın.

Drag ve Drop kütüphaneleri daha iyi UI etkileşimlerine nasıl yardımcı olacaktır

• Geliştirilmiş kullanıcı deneyimi: drag-and-drop işlevselliği, kullanıcıların bir uygulama ile etkileşim kurma sezgisel bir yaklaşımdır. İçerileme ve parçalanma yerine öğeleri sürükleme seçeneği, manuel olarak interaktif ve sorunsuz bir etkileşim sağlar.
• Basitleştirilmiş akışlar: Bilgisayarınızın farklı yerlerinden dosyaları bir uygulamaya yüklemek yerine, onları sürükleyebilir ve bırakabilirsiniz.
• Artan verimlilik: Drag-and-drop işlevselliği zaman tasarrufu sağlar, kullanıcıların daha üretken olmasını sağlar.
• Mobil cihazlar için uygun: Akıllı telefonlar ve tabletler gibi mobil cihazlar sınırlı ekran alanı vardır. Kullanıcılar genellikle navigasyon için jestlere güveniyor, ki bu da sürükleniyor ve harika bir ek sağlıyor.
• İlgilenen arayüzler sağlar: Drag-and-drop işlevselliği uygulamanızın kullanıcı arayüzüne görsel çağrı ekleyebilir. Uygulamada geri bildirimler veren veya tanımlayan animasyonlar ekleyebilir ve öğeleri kaldırabilirsiniz. Bunlar en iyi Drag ve Drop Reaction kütüphaneleridir:

DnD

DnD Karmaşık drag-and-drop arayüzleri oluşturmak için bir dizi reaktör hizmetidir. Bu kütüphane, Trello’ya benzer uygulamaları oluşturmak ve Storify, sürükle-ve-drop işlevselliğinin de veri aktarımını içerir.

Kurulum;

npm install react-dnd react-dnd-html5-backend

Reaktör DnD’yi reaktör bileşeninize aktarabilirsiniz;

1

import { useDrag } from 'react-dnd'

Key Özellikler

• bileşenleriniz ile çalışır: Bu kütüphane hazır öğeler sağlamaz. Bununla birlikte, bileşenlerinizi toplar ve enjektelerinizi onlara dönüştürür.
• Extensible: Reak DnD kütüphanesini kullanırken fare olaylarına veya dokunma olaylara dayanan özel bir geri dönüş ekleyebilirsiniz.
• Test edilebilir: Reak DnD kodunu test etmek için Jest veya Enzyme kullanabilirsiniz.
• Touch support: DnD touch backend Bu kütüphaneye dokunabilir. Reak DnD ücretsiz, açık kaynaklı bir kütüphanedir.

React Draggable

React Draggable Henüz basit ama güçlü Sürüklenebilir elementler oluşturmak için onu kolaylaştıran reaktör kütüphanesi.

Kurulum;

npm install react-draggable

Reaksiyon Draggable’ı kullanmak için, Reaksiyon bileşeninizde olduğu gibi ithalat.

1

import Draggable from 'react-draggable';

Özellikler Özellikler Özellikler Özellikler

• Yükleme ve yapılandırma için kolay: Sadece kütüphaneyi başlatmanız ve ithal etmeniz gerekir. Ayrıca kütüphaneden bireysel bileşenleri de ithal edebilirsiniz.
• vanilya JavaScript ve Reaktör ile uyumlu: Takip ettiği gibi düz JavaScript ile React Draggable kullanabilirsiniz;

1

let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;

• Diğer reaktör kütüphaneleri ile uyumlu: Reakt Draggable’ı diğer kütüphanelerle kullanabilirsiniz, örneğin Reak Grid Layout. Reakt Draggable ücretsiz, açık kaynak Drap ve Drop Reaks kütüphanesidir.

Returnzone

Returnzone HTML-5-compliant drag-and-drop alanı dosyaları için oluşturmak için basit bir React Hook.

Kurulum;

npm install --save react-dropzone

Veya:

yarn add react-dropzone

Daha sonra bu kütüphaneyi aşağıdaki gibi ithal edebilirsiniz;

1

import {useDropzone} from 'react-dropzone';

Özellikler Özellikler Özellikler Özellikler

• Styling Dropzone: Bu kütüphane herhangi bir stil kuralı oluşturmaz ve böylece bileşenlerinize uygun gördüğünüz gibi stilebilirsiniz.
• Kullanıcıların kabul edilebilir dosya türlerini tanımlamalarına izin verin: Dropzone’a kabul edilen veya kabul edilen teklifi sağlayarak belirli dosya türlerini kabul etmek için talimat verebilirsiniz.
• Özel geçerliliği kabul eder: Geçerliator prop, farklı dosyalar için özel geçerliliği belirtmenize izin verir. Reaktör Dropzone ücretsiz, açık kaynak Drag ve Drop Reaction kütüphanesidir.

React Grid Layoutoutout

React Grid Layoutoutout Resizeable ve sürüklenebilir bir grid düzenidir.

Kurulum;

npm install react-grid-layout

Bu kütüphaneyi aşağıdaki gibi ithal edebilirsiniz;

1

import GridLayout from "react-grid-layout";

Özellikler Özellikler Özellikler Özellikler

• Bağımlılıklara bağlı : React Grid Layout tamamen Reakt üzerinde inşa edilmiş ve JQuery’den ücretsiz.
• Resizable widgets : drag-and-drop özelliğinin başında, bileşenleri de yeniden şekillendirebilirsiniz.
• Sorumluluk kırıcı noktalar: Kütüphane her mola noktası için ayrı bir düzen sunar.
• Özelleştirilebilir: Tüm ızgarayı yeniden inşa etmeden öğeleri ekleyebilir veya kaldırabilirsiniz. React Grid Layout ücretsizdir, açık kaynaklı bir reaktör kütüphanesidir.

Reaks

Reaks Reaktör için sürükleyici ve resiz bir bileşendir.

Kurulum;

npm i -S react-rnd

Ya da

yarn add react-rnd

Özellikler Özellikler Özellikler Özellikler

• Basit: Reaktif rnd basit ama çok güçlü olmak için tasarlanmıştır.
• Hem TypeScript hem de JavaScript ile uyumlu: JavaScript veya TypeScript ile yapılandırdığınıza bakılmaksızın uygulamanızla Reaktif rnd kullanabilirsiniz.
• Destekler Yeniden Bağışladı : İhtiyaçlarınıza uygun olarak Resize Rnd kullanarak yaratılan bileşenleri kolayca yeniden şekillendirebilirsiniz. Reaktif rnd ücretsiz, açık kaynaklı reaktör kütüphanesidir.

Reaksiyon Sanallaştırma

Reaksiyon Sanallaştırma Yeniden inşa edilmiş sanallaştırma diskleri olan bir sürükle-ve-drop Reaks çerçevesidir.

Kurulum;

npm install --save react-virtualized-dnd

Reaktör Sanallaştırmayı da yapabilirsiniz;

1

import ExampleBoard from 'react-virtualized-dnd';

Özellikler Özellikler Özellikler Özellikler

• Seçmek için bileşenlerin çeşitliliği: Parçalar “Fixed Height”, “Variable Height” ve “Grupable Droppables” olarak adlandırılır.
• Özelleştirilebilir: İhtiyaçlarınıza uygun olarak Reaktif Virtualized dnd’dan bileşenleri özelleştirebilirsiniz. Reaktör Virtualized dnd, kaynak kodu GitHub’da barındırılan açık kaynaklı bir reaktör çerçevesidir.

Reaksiyon Movable

Reaksiyon Movable Listeler ve masalar için sürüklenme Kılavuzu kütüphanesidir.

Kurulum;

yarn add react-movable

Bu kütüphaneyi de ithal edebilirsiniz;

1

import { List, arrayMove } from 'react-movable';

Özellikler Özellikler Özellikler Özellikler

• Seçilecek çeşitli sürüklenme seçenekleri: Kütüphaneden seçim yapmak için farklı sürüklenme bileşenleri için kazan plaka kodları vardır.
• Hafif kütüphane: Rejim Movable JQuery gibi bağımlılıklara sahip değildir. 4kB’den daha az (gzipped).
• Unopiniated Style: Reaktör Movable, uygulamanızı nasıl stilize etmek istediğinizi kontrol etmez.
• Touch support: Bu kütüphane, akıllı telefonlarda, tabletlerde ve dokunma işlevleri olan herhangi bir cihazda kullanılan uygulamaları yaratır.
• TypeScript’ta yazılı: Tipleri kodunuza tanıtabilirsiniz, JavaScript’te olmayan bir işlevsellik. Reaksiyon Movable ücretsiz, açık kaynaklı reaktör kütüphanesidir.

Draggable

Draggable Bir drag-and-drop Geliştiricilerin yerel tarayıcı olaylarını kapsamlı bir API’ye özetleyerek sürüklenme olayları yaratmasına izin veren bir kütüphane.

Kurulum;

npm install @shopify/draggable --save

veya ip aracılığıyla:

yarn add @shopify/draggable

Reakt uygulamanıza Draggable’i ithal edebilirsiniz;

1

import { Draggable } from '@shopify/draggable';

Özellikler Özellikler Özellikler Özellikler

• Categorized components: Kullanımı gereken tam bileşeni bulmak, bileşenler kategorize edildiği kadar kolaydır. Bu bileşenler özelleştirilebilir.
• Büyük tarayıcılarla uyumlu: Draggable’ı Google Chrome, Mozilla Firefox ve Apple Safari gibi tarayıcılarla kullanabilirsiniz.
• Destekler TypeScript: Bu kütüphane ile çalışırken, TypeScript tanımlarını kodunuza ekleyebilirsiniz.
• Destekler eklentiler: Draggable’in işlevselliğini eklentilerle ekleyebilirsiniz Collidable ve SwapAnimation . Draggable, katkıda bulunanlar tarafından korunan ücretsiz, açık kaynaklı bir reaktör kütüphanesidir.

Seçici Drag seçmek için

Reakt drag-to-select Uygulamanıza sürüklenmek için kullanabileceğiniz bir reaktör kütüphanesidir.

Kurulum;

npm install --save @air/react-drag-to-select

Ya da

yarn add @air/react-drag-to-select

Bu kütüphaneyi uygulamanıza aşağıdaki gibi aktarabilirsiniz;

1

import { useSelectionContainer } from '@air/react-drag-to-select'

Özellikler Özellikler Özellikler Özellikler

• Basit: Bu kütüphane öğeleri seçmez. Ancak, kütüphane seçim kutusu çizir ve sizi koordinatlar verir.
• Destekler TypeScript: Reakt Drag-to-select kütüphanesi TypeScript’te yazılır, bu da TipScript ve JavaScript’te yazılmış Reakt uygulamaları ile kullanabilirsiniz.
• Destekler testi: Bu kütüphaneyi çoğu reaktör test çerçeveleriyle kullanabilirsiniz. React Drag-to-select, ücretsiz, açık kaynak kütüphanesidir.

React Dragula

React Dragula Basit bir drag-and-drop reaktör kütüphanesidir.

Kurulum;

npm install react-dragula --save

Ya da,

bower install react-dragula --save

Özellikler Özellikler Özellikler Özellikler

• Özelleştirilebilir: İhtiyaçlarınıza uygun olarak Reakt Dragula’dan bileşenleri özelleştirebilirsiniz.
• Destekler dokunuş: Bu kütüphaneyi akıllı telefonlar, tabletler ve diğer dokunmatik cihazlar üzerinde kullanılabilecek uygulamalar oluşturmak için kullanabilirsiniz.
• Hafif: Reakt Dragula’nın küçük bir paket büyüklüğü vardır, reaksiyon uygulamanızın küçük olmasını istiyorsanız mükemmel hale getirin. React Dragula özgür, açık kaynaklı bir kütüphanedir.

Sonuç Sonuç Sonuç

Şimdi bir sonraki reaktör uygulamanızda kullanabileceğiniz çeşitli Drag-and-Drop kütüphaneleri var. Kütüphane seçimi, bir sonraki uygulamanıza, tadınıza ve tercihlerinize sahip olmayı planladığınıza bağlı olacaktır.

Uygulamanız büyükse, farklı ihtiyaçlara hitap etmek için çoklu sürüklenme kütüphaneleri kullanabilirsiniz. Bu kütüphanelerin çoğu çeşitli ile uyumludur Reaksiyon test kütüphaneleri Gemi hatasız uygulamaları kolay hale getirin.