Как да изградим плъзгане и пускане на мрежа с React

Блог

В този урок ще изградим мрежа с изображения с плъзгане и пускане в React. Следният GIF показва желания ефект:

Това е заглавието на изображението

По времето, когато започнах да пиша тази статия, не можах да намеря добри източници как да подходим към този проект и реших да го създам от нулата сам. Също така има няколко страхотни библиотеки, като реагирай-красиво-dnd , но те не предлагат лесната поддръжка на 2-D решетка, от която се нуждаех.

Проектът е достъпен на: github.com/tfiechowski/react-dnd-grid-tutorial

Настройвам

Нека започнем със създаването на приложението и инсталирането на някои зависимости, които ще използваме по време на проекта. | _+_ | е библиотеката, която ще използваме за взаимодействия с плъзгане и пускане и ще използваме | _+_ | за оформяне.

react-dnd

За да изградим | _+_ |, ще използваме React Context. Компонентът ще съхранява информацията за елементите и също така ще излага методите за тяхното пренареждане.

Би било възможно да се използва компонент със състояние вместо Context, но по този начин има по -голяма област на гъвкавост. Ако структурата на компонентите стана малко по -сложна, това не би изисквало дълбоко предаване на поддръжка, тъй като можем да получим достъп до контекста почти навсякъде, особено с | _+_ | кука.

b-форма-отметка

Нека да вземем решение за подхода за пренареждане на артикулите в движение.

Механизъм за пренареждане

За да пренаредите елементите, докато ги плъзгате, ще използваме прост подход: винаги, когато плъзгащият се елемент е над друг елемент, той ще заеме мястото си и ще натисне всички останали елементи в десния един слот по -нататък:

Това е заглавието на изображението

Имайки това предвид и изискване да работим с идентификаторите на артикули, можем да започнем да прилагаме | _+_ |.

GridContext

Той ще държи масива items в неговото състояние и ще изложи два метода: | _+_ | и | _+_ |.

| _+_ | функцията е отговорна за преместването на елемента от даден | _+_ | върху мястото на друг елемент с | _+_ | и преместване на останалите на едно място надясно. Има и | _+_ | и | _+_ | помощни функции за пренареждане на масива. | _+_ | просто заменя елементите в състоянието на контекста.

The GridContext може да се реализира по следния начин:

styled-components

src/GridContext.js

DragItem

Сега нека се справим с | _+_ | компонент и го внедрете така:

create-react-app dnd-grid-tutorial cd dnd-grid-tutorial yarn add styled-components react-dnd react-dnd-html5-backend

src / DragItem.js

phpmyadmin docker-compose

Сега нека да разберем какво се случва тук.

Първо, имаме самия компонент обвит с бележка . Подобрява производителността, тъй като само плитко проверява дали реквизитите са се променили, а ако не, използва повторно последния изобразен резултат. В реквизита имаме:

  • | _+_ | - това е уникалният идентификационен номер на артикула,
  • | _+_ | - манипулатор за действително преместване и пренареждане на артикулите,
  • | _+_ | - деца за изобразяване.

След това създаваме | _+_ | който ще се използва като препратка към съответния DOM възел.

Плъзгане: Източникът на плъзгане се създава с | _+_ |. В първия елемент на върнатия масив имаме | _+_ |. Не е наличен от кутията, но всъщност е стойност, върната от | _+_ | метод точно по -долу. | _+_ | функцията има достъп до монитор, който разполага с няколко помощни метода . | _+_ | е задължителен имот. Поставяме уникалния идентификатор там и също | _+_ | за да зададете какъв вид плъзгащ се елемент.

Изпускайте: Сега задаваме целта за падане, използвайки | _+_ |. | _+_ | имотът е зададен на | _+_ | тъй като искаме тук да бъдат изпуснати само елементи от този тип. | _+_ | метод се извиква когато плъзгащият се елемент се навежда над компонента за отпадане .

Въпрос: Как се прави | _+_ | функция получите | _+_ | това се виси като аргумент?

В нашия случай всеки елемент в мрежата може да се плъзга и да се пуска. Механизмите за плъзгане и пускане са свързани с един и същ DOM елемент (чрез | _+_ |), така че винаги, когато задържим елемент върху друг, всъщност получаваме това, което е посочено в този | _+_ | в | _+_ |.

Пренареждане: Сравнявайки идентификационните номера както на плъзгани, така и на задържани елементи, можем да открием момента, в който елементите трябва да бъдат пренаредени. Правим го по следния начин, използвайки | _+_ | манипулатор:

GridContext

Сега трябва всъщност да свържем нашия | _+_ | с плъзгане и пускане: Правим го, като извикваме функциите на конектора, които получихме от | _+_ |:

useContext

Няколко стила: Нека използваме | _+_ | променлива трябва по някакъв начин да различим елемента, който се влачи. Нека направим това, като променим непрозрачността му на 0,5:

как да закупите xyo на kucoin
GridContext

Изобразяване на деца: Сега идва малко сложна част. Бихме искали | _+_ | да бъдат възможно най -многократно използваеми, така че не би било разумно да поставяте някои диви или изображения директно тук. Можем да използваме детския реквизит, за да изобразяваме всичко, което поставяме в | _+_ |.

Възможност за изобразяване на всичко в | _+_ | е голямо предимство, но идва с предупреждение: | _+_ | създаденото от нас не може да бъде директно прикрепено към който и да е действителен DOM възел тук и не можем лесно да го предадем. Според Документация за реакция , Това е така, защото | _+_ | не е подпорка. Подобно на | _+_ |, той се обработва различно от React.

vscode е отстраняване на грешки

Ще трябва да го предадем като персонализиран реквизит и да го прикачим ръчно в целевия компонент. Сега можете да видите причината зад магията с | _+_ | и | _+_ | в | _+_ | компонент, който създадохме по -рано:

moveItem(sourceId, destinationId)

| _+_ | е само div (създаден с | _+_ |), така че преминаването | _+_ | тук е напълно добре. Имайки това предвид, нека завършим | _+_ | и го накарайте да върне децата с актуализиран стил и | _+_ |:

setItems(items)

Имаме подпомагане на децата, така че ще използваме вградения API на React за манипулиране с тях: React.Children.map и React.cloneElement . Всяко дете, което минахме, ще има | _+_ | премина като | _+_ | и персонализиран стил на непрозрачност. Както бе споменато по -рано, | _+_ | е прикрепен ръчно към DOM елемента в компонента GridItem.

Забележка: Това ще се случи автоматично . Вярвам, че за този пример е добре, но ако смятате, че промяната на детския стил по този начин е твърде неявна, можете например да преминете | _+_ | като опора тук и по -късно вземете решение за стила в самия компонент.

Свързване на всичко

Добре, имаме всички градивни елементи, нека свържем всичко сега. | _+_ | изисква взаимодействията с плъзгане и контекста, който трябва да се настрои и | _+_ | се нуждае от доставчик, за да работи правилно. | _+_ | е идеалното място да го направите:

moveItem

src/index.js

Забележка: Това е извън обхвата на урока, но може да искате да проучите други обратни краища с плъзгане и пускане, като например сензорен бекенд , в бъдеще.

Сега, нека да отидем на | _+_ |, да свържем | _+_ |, | _+_ | и | _+_ |:

sourceId

Вече всичко трябва да работи добре, въпреки че решетката е празна. Подготвих а няколко примерни артикула за използване . Чувствайте се свободни да ги копирате и да ги използвате в | _+_ | конструктор за инициализиране на списъка с елементи. Тогава ще видим желания ефект:

Това е заглавието на изображението

Странични бележки

Това е прост пример, в който не се случват сложни неща или API интеграции. Има няколко възможности за по -нататъшното му развитие.

къде да купя бърза

Би било възможно да се удължи | _+_ | компонент за приемане на подпорка като | _+_ | (това ще бъде извикано изпускайте в useDrop ) и би означавало, че влаченето е приключило. Може да се използва за актуализиране на задната част или синхронизиране на други неща в приложението.

Можете да удължите | _+_ | да държи два списъка, основната работна мрежа и резервен с изображенията, чакащи да бъдат добавени към първия.

Пропуснах тази част в урока, но няколко прости теста бяха добавени към GridContext също.

Резюме

Научихме как да създаваме мрежа от изображения с пренареждане в движение. Можете да надградите върху това или просто да разберете как да подходите към по-сложни сценарии с плъзгане и пускане.

Целият проект е в хранилището на GitHub: https://github.com/tfiechowski/react-dnd-grid-tutorial

Благодаря! Чувствайте се свободни да изразите мнението си в коментарите. Много съм отворен и искам да чуя вашите отзиви, независимо дали са положителни или отрицателни!

#reactjs #react #javascript #програмиране

medium.com

Как да изградим плъзгане и пускане на мрежа с React

Как да изградим мрежа с плъзгане и пускане с React, В този урок ще изградим мрежа с изображения с плъзгане и пускане в React. Следният GIF показва желания ефект