Реацт је позната ЈаваСцрипт библиотека корисничког интерфејса (УИ). Можете да користите Реацт библиотеку за креирање различитих врста веб апликација у распону од апликација за друштвене мреже, платформи за е-трговину, блогова, апликација на једној страници, система за управљање садржајем (ЦМС), контролне табле и визуелизације података, да поменемо само неке.
Програмери могу да прошире функционалност Реацт апликација користећи различите библиотеке и оквире. Такве библиотеке се могу груписати у различите класе; Драг-анд-Дроп је категорија библиотеке која је прилично популарна.
Функција Драг анд Дроп је интеракција корисничког интерфејса која омогућава кориснику да кликне/изабере елемент на екрану, превуче га и испусти на другу компоненту. Савршен пример ове функционалности је преуређивање ставки на листи превлачењем и испуштањем ставки на жељену локацију.
Такође можете користити функцију превлачења и испуштања у следећим случајевима;
- Отпремање датотека: Корисници могу да превлаче и испуштају датотеке уместо да се крећу кроз своје машине да би изабрали и отпремили датотеке.
- Канбан табле: Можете да направите контролну таблу на којој корисници могу да превлаче и испуштају ставке у зависности од нивоа активности или фаза.
- Галерије слика: Можете имати галерију слика у коју корисници могу да отпремају и преуређују слике.
- Виџети: Корисници могу да прилагоде изглед апликације превлачењем и испуштањем виџета.
- Корпа за куповину: Корисници могу кликнути на артикал, превући га и испустити у корпу.
Реацт Драг анд Дроп библиотека је скуп унапред изграђених компоненти које омогућавају програмерима да имплементирају функцију Драг анд Дроп у Реацт апликацијама.
Ове библиотеке долазе са компонентама за вишекратну употребу, што омогућава програмерима да креирају елементе који се могу превући и испустити. Библиотеке обрађују различите догађаје као што су превлачење почетка, превлачење ентер, превлачење напуштања и испуштање.
Преглед садржаја
Како ће библиотеке превући и испустити помоћи у бољој интеракцији корисничког интерфејса
- Побољшано корисничко искуство: функција превлачења и испуштања је интуитиван приступ за интеракцију корисника са апликацијом. Опција превлачења и испуштања ставки уместо њиховог ручног уноса пружа интерактивну и беспрекорну интеракцију.
- Поједностављени токови посла: Уместо да отпремате датотеке са различитих локација вашег рачунара у апликацију, можете их једноставно превући и отпустити.
- Повећана продуктивност: функција превлачења и испуштања штеди време, чинећи кориснике продуктивнијим.
- Погодно за мобилне уређаје: Мобилни уређаји попут паметних телефона и таблета имају ограничен простор на екрану. Корисници се углавном ослањају на покрете за навигацију, што чини превлачење и испуштање одличним додатком.
- Пружа привлачне интерфејсе: Функција превлачења и испуштања може додати визуелну привлачност корисничком интерфејсу ваше апликације. Можете да додате анимације које пружају повратне информације или описују радње док корисници превлаче и испуштају ставке у апликацији.
Ово су најбоље Драг анд Дроп Реацт библиотеке:
Реаговати ДнД
Реацт ДнД је скуп Реацт услужних програма за изградњу сложених интерфејса за превлачење и испуштање. Ова библиотека је савршена за креирање апликација сличних Трелло-у и Сторифи-у, где функција превлачења и испуштања такође укључује пренос података.
Инсталлатион;
нпм инсталл реацт-днд реацт-днд-хтмл5-бацкенд
Можете увести Реацт ДнД у своју Реацт компоненту као;
import { useDrag } from 'react-dnd'
Кључне карактеристике
- Ради са вашим компонентама: Ова библиотека не пружа готове виџете. Међутим, он омотава ваше компоненте и убризгава реквизите у њих.
- Прошириви: Можете да додате прилагођену позадину на основу догађаја миша или додирних догађаја када користите Реацт ДнД библиотеку.
- Тестабле: Можете користити Јест или Ензиме за тестирање Реацт ДнД кода.
- Подршка за додир: Реацт ДнД тоуцх бацкенд додаје функционалност додира овој библиотеци.
Реацт ДнД је бесплатна библиотека отвореног кода.
Реацт Драггабле
Реацт Драггабле је једноставна, али моћна Реацт библиотека која олакшава креирање елемената за превлачење.
Инсталлатион;
нпм инсталл реацт-драггабле
Да бисте користили Реацт Драггабле, увезите на Реацт компоненту на следећи начин.
import Draggable from 'react-draggable';
Карактеристике
- Лако се инсталира и конфигурише: Потребно је само да инсталирате и увезете библиотеку да бисте започели. Такође можете увести појединачне компоненте из библиотеке.
- Компатибилан са ванилла ЈаваСцрипт-ом и Реацт-ом: Можете користити Реацт Драггабле са обичним ЈаваСцрипт-ом на следећи начин;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Компатибилан са другим Реацт библиотекама: Реацт Драггабле можете користити са другим библиотекама, као што је Реацт Грид Лаиоут.
Реацт Драггабле је бесплатна Драп анд Дроп Реацт библиотека отвореног кода.
Реацт Дропзоне
Реацт Дропзоне је једноставан Реацт Хоок за креирање ХТМЛ-5 компатибилне зоне превлачења и испуштања за датотеке.
Инсталлатион;
нпм инсталл – сачувати реацт-дропзоне
или:
предиво додати реацт-дропзоне
Затим можете увести ову библиотеку на следећи начин;
import {useDropzone} from 'react-dropzone';
Карактеристике
- Стилинг Дропзоне: Ова библиотека не поставља никаква правила стилизовања, и тако можете да стилизујете своје компоненте како вам одговара.
- Омогућава корисницима да дефинишу прихватљиве типове датотека: Можете наложити Дропзоне-у да прихвати или одбије одређене типове датотека тако што ћете обезбедити прихватање.
- Прихвата прилагођену проверу ваљаности: Провера валидатора вам омогућава да одредите прилагођену валидацију за различите датотеке.
Реацт Дропзоне је бесплатна Реацт библиотека отвореног кода Драг анд Дроп.
Реацт Грид Лаиоут
Реацт Грид Лаиоут је распоред мреже за Реацт са могућношћу промене величине и превлачењем.
Инсталлатион;
нпм инсталл реацт-грид-лаиоут
Ову библиотеку можете увести на следећи начин;
import GridLayout from "react-grid-layout";
Карактеристике
- Без зависности: Реацт Грид Лаиоут је изграђен искључиво на Реацт-у и не садржи ЈКуери.
- Виџети који се могу променити: Поред функције превуци и испусти, такође можете променити величину компоненти.
- Тачке прекида: Библиотека обезбеђује посебан изглед за сваку тачку прекида.
- Прилагодљиво: Можете да додајете или уклањате виџете без поновне изградње целе мреже.
Реацт Грид Лаиоут је бесплатна Реацт библиотека отвореног кода.
Реаговати рнд
Реацт рнд је компонента за Реацт која се може превући и променити величину.
Инсталлатион;
нпм и -С реаговати-рнд
Ор
предиво додати реацт-рнд
Карактеристике
- Једноставно: Реацт рнд је дизајниран да буде једноставан, али веома моћан.
- Компатибилан и са ТипеСцрипт-ом и са ЈаваСцрипт-ом: Можете да користите Реацт рнд са својом апликацијом без обзира да ли сте је конфигурисали са ЈаваСцрипт-ом или ТипеСцрипт-ом.
- Подржава промену величине: Можете лако да промените величину компоненти креираних помоћу Реацт рнд-а како би одговарале вашим потребама.
Реацт рнд је бесплатна Реацт библиотека отвореног кода.
Реацт Виртуализед днд
Реацт Виртуализед днд је превуци и испусти Реацт оквир који има уграђене траке за виртуелизацију.
Инсталлатион;
нпм инсталл –саве реацт-виртуализед-днд
Можете увести Реацт Виртуализед днд као;
import ExampleBoard from 'react-virtualized-dnd';
Карактеристике
- Разноврсне компоненте које можете изабрати: Компоненте су груписане у „Фиксну висину“, „Варијабилну висину“ и „Гроупабле дропаблес“.
- Прилагодљиво: Можете прилагодити компоненте из Реацт Виртуализед днд да одговарају вашим потребама.
Реацт Виртуализед днд је Реацт оквир отвореног кода чији се изворни код налази на ГитХуб-у.
Реацт Мовабле
Реацт Мовабле је драг-анд-дроп Реацт библиотека за листе и табеле.
Инсталлатион;
пређе додати реаговати-покретно
Ову библиотеку можете увести као;
import { List, arrayMove } from 'react-movable';
Карактеристике
- Различите опције превлачења и испуштања које можете изабрати: Библиотека има шаблонске кодове за различите типове компоненти за превлачење и испуштање.
- Лагана библиотека: Реацт Мовабле нема зависности као што је ЈКуери. Мање је од 4 кБ (гзипирано).
- Непрепознатљив стил: Реацт Мовабле не контролише како бисте можда желели да стилизујете своју апликацију.
- Подршка за додир: Ова библиотека помаже у креирању апликација које се могу користити на паметним телефонима, таблетима и било ком уређају са функцијом додира.
- Написано у ТипеСцрипт-у: Можете увести типове у свој код, што је функционалност недоступна у ЈаваСцрипт-у.
Реацт Мовабле је бесплатна Реацт библиотека отвореног кода.
Драггабле
Драггабле је драг-анд-дроп Реацт библиотека која омогућава програмерима да креирају превуци и испусти догађаје апстрахујући изворне догађаје претраживача у свеобухватни АПИ.
Инсталлатион;
нпм инсталл @схопифи/драггабле –саве
или преко предива:
предиво додати @схопифи/драггабле
Можете да увезете Драггабле у своју Реацт апликацију као;
import { Draggable } from '@shopify/draggable';
Карактеристике
- Категоризоване компоненте: Проналажење тачне компоненте за употребу је лако јер су компоненте категорисане. Ове компоненте су прилагодљиве.
- Компатибилан са главним претраживачима: Можете да користите Драггабле са прегледачима као што су Гоогле Цхроме, Мозилла Фирефок и Аппле Сафари.
- Подржава ТипеСцрипт: Када радите са овом библиотеком, можете додати ТипеСцрипт дефиниције свом коду.
- Подржава додатке: Функционалности Драггабле-а можете додати додацима као што су Цоллидабле и СвапАниматион.
Драггабле је бесплатна Реацт библиотека отвореног кода коју одржавају сарадници.
Реагујте Превуците да бисте изабрали
Реацт драг-то-селецт је Реацт библиотека коју можете користити за додавање функционалности превлачења-за-селекта у своју апликацију.
Инсталлатион;
нпм инсталл –саве @аир/реацт-драг-то-селецт
Ор
предиво додати @аир/реацт-драг-то-селецт
Ову библиотеку можете да увезете у своју апликацију на следећи начин;
import { useSelectionContainer } from '@air/react-drag-to-select'
Карактеристике
- Једноставно: Ова библиотека не бира ставке. Међутим, библиотека црта оквир за избор и даје вам координате.
- Подржава ТипеСцрипт: Библиотека Реацт Драг-то-селецт је написана у ТипеСцрипт-у, што значи да је можете користити са Реацт апликацијама написаним у ТипеСцрипт-у и ЈаваСцрипт-у.
- Подржава тестирање: Ову библиотеку можете користити са већином Реацт оквира за тестирање.
Реацт Драг-то-селецт је бесплатна библиотека отвореног кода.
Реагуј Драгула
Реацт Драгула је једноставна Реацт библиотека превуци и испусти.
Инсталлатион;
нпм инсталл реацт-драгула –саве
Или,
бовер инсталл реацт-драгула –саве
Карактеристике
- Прилагодљиво: Можете прилагодити компоненте из Реацт Драгула да одговарају вашим потребама.
- Подржава додир: Ову библиотеку можете користити за креирање апликација које се могу користити на паметним телефонима, таблетима и другим уређајима на додир.
- Лаган: Реацт Драгула има малу величину пакета, што га чини савршеним ако желите да ваша Реацт апликација буде мала.
Реацт Драгула је бесплатна библиотека отвореног кода.
Закључак
Сада имате низ библиотека превлачења и испуштања које можете користити у својој следећој Реацт апликацији. Избор библиотеке зависиће од функција које намеравате да имате у следећој апликацији, укуса и преференција.
Ако је ваша апликација велика, можете да користите више библиотека за превлачење и испуштање да бисте задовољили различите потребе. Већина ових библиотека је компатибилна са различитим Реацт библиотекама за тестирање, што олакшава испоруку апликација без грешака.