Draggin’ en Droppin’ in Reageren

0
15

Het Reageren ecosysteem biedt ons veel bibliotheken die alle zijn gericht op de interactie van slepen en neerzetten. We reageren in het oog reageren met-mooie-dnd, reageren-drag-n-drop en nog veel meer, maar sommige van hen heel veel werk om te bouwen, zelfs een eenvoudige drag en drop demo, en sommige niet verstrekken u met meer complexe functionaliteit (bijv. meerdere slepen en neerzetten exemplaren), en als ze dat doen, wordt het zeer complex.

Dit is waar reageren-sorteerbare-hoc in het spel komt.

💡 Deze tutorial vereist een basiskennis van Reageren bibliotheek en Reageren haken.

Deze bibliotheek heeft “HOC” in haar naam en voor een goede reden. Het biedt een hogere orde componenten die strekt een component met drag-and-drop functionaliteit.

We lopen via een implementatie van de functionaliteiten.

Het spinnen van een project

Voor deze tutorial gaan we het bouwen van een app met grappige Gif ‘ s, waarmee u kunt slepen om de viewport.

GitHub Repo

Laten we een eenvoudige app en voeg drag-n-drop functionaliteit aan. We gaan gebruik maken-reageren-app te draaien op een nieuwe Reageren project:

npx maken-reageren-app-je-project-naam

Nu veranderen we naar de project directory en installeren reageren-sorteren-hoc en array-verplaatsen. De laatste is nodig om items te verplaatsen in een scala aan verschillende posities.

cd-uw-project-naam
garen toevoegen reageren-sorteerbare-hoc array-move

Het toevoegen van stijlen, data-en GIF-component

Ter wille van de eenvoud, we gaan schrijven alle stijlen in onze App.css-bestand. U kunt overschrijven stijlen je moet er met het volgende:

.App {
achtergrond: #1a1919;
color: #fff;
min-height: 100vh;
padding: 25 pixels;
text-align: center;
}

.App h1 {
font-size: 52px;
margin: 0;
}

.App h2 {
color: #f6c945;
text-transform: uppercase;
}

.App img {
cursor: pak;
hoogte: 180px;
width: 240px;
}

We maken onze staat met GIFs. Voor dit doel gaan we gebruik maken van Reageren is gebouwd in useState haak:

importeren Reageren, { useState } van ‘reageren’;

Voeg nu het volgende voordat het return statement:

const [gif ‘ s, setGifs] = useState([
‘https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif’,
‘https://media.giphy.com/media/l46CbZ7KWEhN1oci4/giphy.gif’,
‘https://media.giphy.com/media/3ohzgD1wRxpvpkDCSI/giphy.gif’,
‘https://media.giphy.com/media/xT1XGYy9NPhWRPp4pq/giphy.gif’,
]);

Het is tijd voor het maken van onze eenvoudige GIF component. Het maken van een Gif.js bestand in de map src en pas in de volgende code:

importeren Reageren van ‘reageren’;
importeren PropTypes van ‘prop-types’;

const Gif = ({ gif }) => (<img src={gif} alt=”gif” />)

Gif.propTypes = {
gif: PropTypes.string.isRequired,
};

export standaard Gif;

Wij proberen altijd te volgen van de best practices bij het schrijven van de code; dus importeren we ook PropTypes voor het controleren van het type.

Het importeren van de Gif-component en toevoegen aan de hoofd-App component. Met een beetje schoon te maken, ziet het er zo uit:

importeren Reageren, { useState } van ‘reageren’;
importeren ‘./App.css’;

importeren Gif uit ‘./Gif’;

const App = () => {
const [gif ‘ s, setGifs] = useState([
‘https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif’,
‘https://media.giphy.com/media/l46CbZ7KWEhN1oci4/giphy.gif’,
‘https://media.giphy.com/media/3ohzgD1wRxpvpkDCSI/giphy.gif’,
‘https://media.giphy.com/media/xT1XGYy9NPhWRPp4pq/giphy.gif’,
]);

return (
<div className=”App”>
<h1>Sleep die Gif ‘ s rond</h1>
<h2>Set 1</h2>
{gifs.kaart((gif, i) => <Gif key={gif} gif={gif} />)}
</div>
);
}

export standaard applicatie;

Ga naar http://localhost:3000/ om te zien wat de app nu uitziet:

Een screenshot van reageren-sorteerbare-hoc-artikel-app

Op de drag-n-drop spullen

Oke, het is tijd maken onze GIFs slepen! En dropbaar.

Om te beginnen, moeten we twee HOCs van reageren-sorteerbare-hoc, en de >arrayMove methode van de array-move bibliotheek om de draagwijdte van onze new array na het slepen gebeurt. We willen onze GIFs te blijven op hun nieuwe posities, rechts? Nou, dat is wat dit gaat ons laten doen.

Laten we ze importeren:

importeren { sortableContainer, sortableElement } van de ‘reageer-sorteerbare-hoc’;
importeren arrayMove van ‘array-move’;

Zoals je misschien hebt geraden, deze onderdelen worden wrappers die bloot functionaliteit die nodig is voor ons.

  • sortableContainer is een container voor onze sorteerbare elementen.
  • sortableElement is een container voor elk afzonderlijk element we te renderen.

Laten we het volgende doen na al onze invoer:

const SortableGifsContainer = sortableContainer(({ kinderen }) => <div className=”gif”>{kinderen}</div>);

const SortableGif = sortableElement(({ gif }) => <Gif key={gif} gif={gif} />);

We hebben zojuist een container voor onze kinderen elementen, die worden doorgegeven binnen onze SortableGifsContainer en ook gemaakt wrapper voor een enkele Gif-component.
Als het een beetje onduidelijk voor u, geen zorgen — u zult begrijpen direct na de implementatie.

💡Opmerking: U moet de wikkel je kinderen in een div of een andere geldige HTML-element.

Het is tijd om wrap onze GIFs in de SortableGifsContainer en vervang de Gif-component met onze nieuw gemaakte SortableGif:

<SortableGifsContainer as=”x” onSortEnd={onSortEnd}>
{gifs.kaart((gif, i) =>
<SortableGif
// vergeet niet te passeren index prop met item index
index={i}
key={gif}
gif={gif}
/>
)}
</SortableGifsContainer>

Het is belangrijk op te merken dat je nodig hebt om de index prop uw sorteerbare element, zodat de bibliotheek kan onderscheid maken tussen items. Het is vergelijkbaar met het toevoegen van sleutels om de lijsten op te Reageren).

We voegen as omdat onze items zijn horizontaal geplaatst en we willen slepen ze horizontaal, terwijl de standaard verticaal te slepen. In andere woorden, we zijn het beperken van het slepen langs de horizontale x-as. Zoals je ziet hebben we ook nog een onSortEnd functie, die wordt elke keer als we slepen of te sorteren onze items rond. Er zijn natuurlijk veel meer evenementen, maar u kunt meer informatie vinden in de documentatie die reeds doet een uitstekend werk van hen te bedekken.

Tijd om het uit te voeren! Voeg de volgende regel boven de return statement:

const onSortEnd = ({ oldIndex, newIndex }) => setGifs(arrayMove(gif ‘ s, oldIndex, newIndex));

Ik wil uitleggen één ding: onze functie ontving een oude en een nieuwe index van het item dat werd gesleept en, natuurlijk, elke keer nadat we verplaats items passen we onze eerste array met de hulp van arrayMove.

Tada! Nu u weet hoe het te implementeren drag-n-drop in uw project. Nu gaan doen! 🎉 🎉 🎉

Wat als we meerdere lijsten van items?

Zoals u kunt zien, het vorige voorbeeld was relatief eenvoudig. U in principe wikkel elk van de items in een sorteerbare HOC en wikkel het rond met sortableContainer en, bingo, je hebt de basis van slepen en neerzetten.

Maar hoe zullen we het doen met meerdere lijsten? Het goede nieuws is dat te reageren-sorteerbare-hoc biedt ons een collectie prop dus we kunnen een onderscheid maken tussen de lijsten.

Ten eerste, we moeten toevoegen tweede reeks Gif ‘ s:

const [newGifs, setNewGifs] = useState([
‘https://media.giphy.com/media/xiOgHgY2ceKhm46cAj/giphy.gif’,
‘https://media.giphy.com/media/3oKIPuMqYfRsyJTWfu/giphy.gif’,
‘https://media.giphy.com/media/4ZgLPakqTajjVFOVqw/giphy.gif’,
‘https://media.giphy.com/media/3o7btXIelzs8nBnznG/giphy.gif’,
]);

Als u ze wilt zien voordat we gaan volgende, voeg de volgende regels toe na de SortableGifsContainer afsluitende tag:

{newGifs.kaart(gif => <Gif key={gif} gif={gif} />)}

Goed, tijd om het te vervangen met een versleepbare versie.

De uitvoering is hetzelfde als in het eerste voorbeeld is behalve één ding: we hebben een collectie prop onze SortableGif. Natuurlijk, je kunt komen met een naam voor de verzameling, vergeet niet, we ‘ re gonna need it in voor onze onSortEnd functie.

<h2>2</h2>

<SortableGifsContainer as=”x” onSortEnd={onSortEnd}>
{newGifs.kaart((gif, i) => <SortableGif index={i} sleutel={gif} gif={gif} collection=”newGifs” />)}
</SortableGifsContainer>

Vervolgens moeten we de collectie toevoegen prop naar onze eerste lijst. Ik heb gekozen voor de naam GIFs voor de eerste lijst van items, maar het is aan u!

Nu moeten we veranderen onze onSortEnd functie. Onze functie ontving de oude en de nieuwe indexen, maar we kunnen ook destructure een verzameling van. Rechts, precies degene die we hebben toegevoegd aan onze SortableGif.

Dus alles wat we nu moeten doen, is het schrijven van een JavaScript-switch statement om te controleren of de naam van de collectie en het wijzigen van de rechter matrix van GIFs op sleep.

const onSortEnd = ({ oldIndex, newIndex, collectie }) => {
switch(collectie) {
voor het geval dat ‘gif ‘ s’:
setGifs(arrayMove(gif ‘ s, oldIndex, newIndex))
break;
voor het geval dat ‘newGifs’:
setNewGifs(arrayMove(newGifs, oldIndex, newIndex))
break;
standaard:
break;
}
}

Tijd om het te controleren!

Zoals u kunt zien, hebben we nu twee aparte lijsten van Gif ‘ s en we kunnen slepen en te sorteren. Bovendien zijn ze zelfstandige betekenis items uit verschillende lijsten niet te worden gemengd.

Precies wat we wilden doen! Nu weet u hoe te maken van en omgaan met slepen en neerzetten met meerdere lijsten van items. Gefeliciteerd 🎉

Hoop dat je hebt genoten van het zo veel als ik deed schrijven! Als u wilt verwijzen naar de volledige code, het is allemaal op GitHub hier. Als u vragen hebt, voel je vrij om contact met mij op via e-mail.