React.js: implementer træk og slip-funktionen uden at bruge eksterne biblioteker

Kom i detaljer med implementering af træk og slip-funktioner i React fra bunden.

Lad os først se resultatet af det, vi skal bygge. Jeg prøver .gif - forhåbentlig fungerer det overalt som forventet. Jeg har brugt Camtasia med en personlig licens.

De vigtigste læringspunkter er at:

  1. lav et element, der kan trækkes ved at tilføje attributten "trækbar"
  2. gøre et område droppable ved at implementere "dragover" begivenheden
  3. fange trækdataene ved at implementere begivenheden "dragstart"
  4. fange dråben ved at implementere "drop" begivenheden
  5. implementere "træk" -hændelsen, der affyres, når elementet trækkes
  6. gemme de mellemliggende data i dataTransfer-objektet

For visuelle elever, gå over til videoen nedenfor.

Trin 1 - Opret root-appen til demoen

Al koden til træk og slip går ind i AppDragDropDemo.js-komponenten.

import React from 'react';import ReactDOM from 'react-dom';import '.index.css';import AppDragDropDemo from './AppDragDropDemo';
ReactDOM.render(, document.getElementById("root"));

Indgangsstedet for AppDragDropDemo ligner koden nedenfor.

import React, { Component } from 'react';
export default class AppDragDropDemo extends Component { render () { return ( DRAG & DROP DEMO ); }}

Hvis du nu kører applikationen, får du denne fantastiske skærm (ordspil beregnet)

Trin 2 - Opret tilstandsobjektet for at gemme nogle opgaver

Lad os oprette nogle opgaver for at simulere en simpel applikation. Hvad vi agter at gøre er at trække og slippe disse opgaver i forskellige kategorier som wip, completeosv.

export default class AppDragDropDemo extends Component { state = { tasks: [{name:"Learn Angular", category:"wip", bgcolor: "yellow"}, {name:"React", category:"wip", bgcolor:"pink"}, {name:"Vue", category:"complete", bgcolor:"skyblue"} ]}
 render () { return ( DRAG & DROP DEMO ); }}

Trin 3 - organiser vores data i kategorier

Lad os implementere nedenstående kode i gengivelsesmetoden for at gruppere opgaver i deres respektive kategorier wipog complete. Du er velkommen til at tilføje flere kategorier og lege med koden.

Du kan kopiere og indsætte koden ovenfor fra nedenstående uddrag.

render() { var tasks = { wip: [], complete: [] } this.state.tasks.forEach ((t) => { tasks[t.category].push( this.onDragStart(e, t.name)} draggable className="draggable" style={{backgroundColor: t.bgcolor}}> {t.name} ); });

I ovenstående kode løber vi gennem alle opgaver og opretter en div for hvert opgaveelement og gemmer det i de respektive kategorier.

Så det wip[]indeholder alle opgaver i wip-kategorien og complete[]indeholder alle de afsluttede opgaver.

Trin 4 - Gør opgaveelementet trækkeligt

Tilføj trækbar attribut til eller ethvert element for at gøre et element trækkeligt. Se kodeblokken ovenfor for kodens tekstformat.

Trin 5 - Opret en droppbar beholder

For at oprette en droppbar container skal du implementere dragover event. Nu, da vi vil deaktivere standardovertrækningshændelsen, kalder vi simpelt hen event.preventDefault()fra udtrækningsbegivenheden.

Vi gengiver også {tasks.wip}og {tasks.complete}i deres tilsvarende div-elementer.

return ( 

DRAG & DROP DEMO

this.onDragOver(e)} onDrop={(e)=>{this.onDrop(e, "wip")}}> WIP {tasks.wip} this.onDragOver(e)} onDrop={(e)=>this.onDrop(e, "complete")}> COMPLETED {tasks.complete} );
Let us now implement the onDragOver() event handler.

Outputtet hidtil vil se ud som nedenstående figur.

Trin 6 - fang tilstanden af ​​det element, der trækkes

Lad os ændre koden, hvor vi opretter kategorien for hver opgave. Tilføj en begivenhedshåndterer ondragstartog videregiv id / navn eller alle de oplysninger, du har brug for for at vedvare, mens træk / slip sker.

Jeg bruger namesom en unik værdi til at identificere opgaven. Du er velkommen til at bruge ID eller hvilken unik nøgle du har.

Lad os nu implementere onDragStartbegivenhedshåndtereren.

I onDragStart-handleren griber vi parameteren og gemmer den i dataTransfer-objektet. (Bliv ikke forvirret af parameternavnet, da jeg antager, at jeg var i en anden navngivningsverden, mens jeg kodede dette :).)

IE-note : dette fungerer muligvis ikke med IE. For IE er bedre praksis at give formatet som nøglen som vist nedenfor.

Instead of
ev.dataTransfer.setData("id", id)
USE
ev.dataTransfer.setData(“text/plain”,id)

The above handler will ensure that the element being dragged is stored in the event object and is available for use when required. It may be required while dropping on a target.

Now if you run the application and drag the elements, the following logs will be output.

Step 7 — handle the drop event.

Let’s open up the render method and add the onDrop event to the div with a className of droppable.

In the above code, we add the drop event handler, and pass the required category complete as an argument. This indicates we are dropping the element from the wip state to the complete state (category). Please feel free to change the names, as required.

Let’s now implement the onDrop() event handler.

Here’s the code you can copy/paste:

onDrop = (ev, cat) => { let id = ev.dataTransfer.getData("id"); let tasks = this.state.tasks.filter((task) => { if (task.name == id) { task.category = cat; } return task; }); this.setState({ ...this.state, tasks }); }

In the onDrop event handler, we grab the task being dragged by using getData method on the event’s dataTransfer object.

We then create a new tasks array by using the filter method, and change the category of the task being dragged.

setState() will trigger render, and the tasks will be rendered in the right areas.

IE note: To make it work in IE, use the below getData method.

Instead of

var id = ev.dataTransfer.getData(“id”)

use

var id = ev.dataTransfer.getData(“text”)

Step 8 — to implement drop from “complete” to “wip,” add the onDrop handler

The onDrop() handler remains the same as earlier.

Finally, run the code and marvel at your creation :) and have fun while coding.

You can grab the source code from here.

Note: for this to work cross browser, change the setData type to string.

for eksempel at indstille data, brug ev.dataTransfer.setData(“text/plain”,id). Brug til at læse datavar id = ev.dataTransfer.getData(“text”)

Da mit mål var at demonstrere de centrale træk-og-slip-funktioner, er koden ikke optimeret til faktorer som design og navngivningskonventioner.

Lær med mig @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai

Kampagne: Særlig 10 $ -kupon til mellemlæsere til min kommende live ReactJS-Beyond basics-kursus på Udemy, hvis du ønsker at støtte vores open source-læseplan Mastering frontend engineering om 12 til 20 uger.

Netop offentliggjort mit tidlige adgangskursus Javascript Deep Dive - Code your own React