React.js: valósítsa meg a fogd és vidd funkciót külső könyvtárak használata nélkül

Tájékozódjon a drag and drop funkciók megvalósításának részleteiről a React nulláról.

Először nézzük meg, mit fogunk építeni. Kipróbálom a .gif fájlt - remélhetőleg mindenhol a várakozásoknak megfelelően működik. Személyes engedéllyel használtam a Camtasia-t.

A legfontosabb tanulási pontok a következők:

  1. tegyen egy elemet húzhatóvá a „draggable” attribútum hozzáadásával
  2. tegyen egy területet eldobhatóvá a „dragover” esemény megvalósításával
  3. rögzítse a drag adatokat a „dragstart” esemény megvalósításával
  4. rögzítse a cseppet a „drop” esemény végrehajtásával
  5. hajtsa végre az elem húzásakor elindított „drag” eseményt
  6. tárolja a köztes adatokat a dataTransfer objektumban

A vizuális tanulók számára lépjen az alábbi videóra.

1. lépés - hozza létre a demo gyökéralkalmazását

Az áthúzás összes kódja az AppDragDropDemo.js összetevőbe kerül.

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

Az AppDragDropDemo belépési pontja úgy néz ki, mint az alábbi kód.

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

Ha most futtatja az alkalmazást, akkor megjelenik ez a fantasztikus képernyő (szójáték)

2. lépés - hozzon létre egy állapotobjektumot egyes feladatok tárolásához

Hozzunk létre néhány feladatot egy egyszerű alkalmazás szimulálására. Az a szándékunk, hogy ezeket a feladatokat különböző kategóriákba húzzuk, például wip, completestb.

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 ); }}

3. lépés - rendezze adatainkat kategóriákba

Nézzük végre a lenti kódot a render eljárás, a csoportos feladatokat a saját kategóriájában, wipés complete. Adjon hozzá további kategóriákat, és játsszon a kóddal.

Az alábbi kódrészletből másolhatja be a fenti kódot.

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} ); });

A fenti kódban végigvezetjük az összes feladatot, és létrehozunk egy div-t minden feladat elemhez, és eltároljuk a megfelelő kategóriákban.

Tehát wip[]a wip kategória összes feladatát complete[]tartalmazza, és az összes befejezett feladatot tartalmazza.

4. lépés - tegye a feladat elemet húzhatóvá

Adja hozzá a draggable attribútumot az elemhez vagy bármely elemhez, hogy az elemet húzhatóvá tegye. A kód szöveges formátumát lásd a fenti kódblokkban.

5. lépés - hozzon létre egy dobható tartályt

Dobható tároló létrehozásához hajtsa végre a dragover event. Mivel le akarjuk tiltani az alapértelmezett dragover eseményt, egyszerűen hívjuk a event.preventDefault()the dragover eseményt.

Megjelenítjük {tasks.wip}és {tasks.complete}a hozzájuk tartozó div elemekben is.

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.

Az eddigi kimenet az alábbi ábrán fog kinézni.

6. lépés - rögzítse a húzott elem állapotát

Módosítsuk azt a kódot, ahol az egyes feladatok kategóriáját létrehozzuk. Adjon hozzá egy eseménykezelőt, ondragstartés adja át az azonosítót / nevet vagy minden olyan információt, amelyre szükséged van, amíg a drag / drop folyamatban van.

nameEgyedi értékként használom a feladat azonosítását. Használja nyugodtan személyi igazolványát vagy bármilyen egyedi kulcsát.

Most valósítsuk meg az onDragStarteseménykezelőt.

Az onDragStart kezelőben megragadjuk a paramétert, és eltároljuk azt a dataTransfer objektumon belül. (Ne tévesszen meg a paraméterek elnevezése, mivel azt hiszem, más névadó világban voltam, miközben ezt kódoltam :).)

IE megjegyzés : lehet, hogy ez nem működik az IE-vel. Az IE esetében a jobb gyakorlat az, ha a formátumot adjuk meg kulcsnak az alábbiak szerint.

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 example, to set data, use ev.dataTransfer.setData(“text/plain”,id). To read data, use var id = ev.dataTransfer.getData(“text”)

Since my aim was to demonstrate the core drag and drop features, the code has not been optimized for factors such as design and naming conventions.

Learn with me @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai

Promotion: Special 10$ coupon for Medium readers for my upcoming live ReactJS-Beyond the basics course on Udemy in case you wish to support our open source curriculum Mastering frontend engineering in 12 to 20 weeks.

Just published my early access course Javascript Deep Dive — Code your own React