React.js: įdėkite „drag and drop“ funkciją nenaudodami išorinių bibliotekų

Susipažinkite su išsamiomis „drag and drop“ funkcijų įdiegimo funkcijomis „Reaguokite nuo nulio“.

Pirmiausia pažiūrėkime, ką kursime. Bandau .gif - tikiuosi, kad jis veiks visur, kaip tikėtasi. „Camtasia“ naudojau su asmenine licencija.

Pagrindiniai mokymosi aspektai yra šie:

  1. padaryti elementą vilkiamą pridedant „draggable“ atributą
  2. padaryti sritį išmestą įgyvendinant „dragover“ įvykį
  3. užfiksuokite vilkimo duomenis įgyvendindami „dragstart“ įvykį
  4. užfiksuokite lašą įgyvendindami „drop“ įvykį
  5. įgyvendinti „vilkimo“ įvykį, kuris suveikia, kai elementas traukiamas
  6. tarpinius duomenis saugokite objekte „dataTransfer“

Vizualiai besimokantiems pereikite prie toliau pateikto vaizdo įrašo.

1 žingsnis - sukurkite pagrindinę demonstracinės programos programą

Visas „drag and drop“ kodas pateks į „AppDragDropDemo.js“ komponentą.

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

„AppDragDropDemo“ įvesties taškas atrodo kaip žemiau pateiktas kodas.

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

Jei dabar paleisite programą, jums bus pateiktas šis nuostabus ekranas (skirtas kalambūrai)

2 žingsnis - sukurkite būsenos objektą, kad išsaugotumėte kai kurias užduotis

Sukurkime keletą užduočių, kad imituotume paprastą programą. Mes ketiname nuvilkti šias užduotis į įvairias kategorijas, pvz wip. complete, Ir pan.

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 žingsnis - sutvarkykite mūsų duomenis į kategorijas

Leiskite įgyvendinti žemiau kodą Užkrauta metodas, grupuoti užduotis į jų atitinkamas kategorijas, wipir complete. Drąsiai pridėkite daugiau kategorijų ir žaiskite su kodu.

Galite nukopijuoti aukščiau esantį kodą iš toliau pateikto fragmento.

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

Pirmiau pateiktame kode mes atliekame visas užduotis ir kuriame kiekvienam užduoties elementui div ir saugome jį atitinkamose kategorijose.

Taigi, jame wip[]yra visos „wip“ kategorijos užduotys ir complete[]visos atliktos užduotys.

4 žingsnis - paverskite užduoties elementą

Pridėkite „draggable“ atributą prie elemento ar bet kurio kito elemento, kad elementą būtų galima vilkti. Kodo teksto formatą rasite aukščiau pateiktame kodo bloke.

5 žingsnis - sukurkite išleidžiamą konteinerį

Norėdami sukurti išleidžiamą konteinerį, įdiekite dragover event. Kadangi norime išjungti numatytąjį „dragover“ įvykį, paprasčiausiai paskambiname event.preventDefault()iš „dragover“ įvykio.

Taip pat pateiksime {tasks.wip}ir {tasks.complete}atitinkamuose jų div elementuose.

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.

Iki šiol išvestis atrodys kaip žemiau.

6 žingsnis - užfiksuokite vilkimo elemento būseną

Pakeiskime kodą, kuriame kuriame kiekvienos užduoties kategoriją. Pridėkite įvykio tvarkytoją ondragstartir perduokite identifikatorių / vardą arba bet kokią informaciją, kurios reikia išsaugoti, kol vyksta vilkimas.

nameKaip unikalią vertę naudoju užduočiai identifikuoti. Nesivaržykite naudoti asmens tapatybės dokumentą ar bet kokį unikalų raktą, kurį turite.

Dabar įgyvendinkime onDragStartrenginių tvarkytuvą.

„OnDragStart“ tvarkyklėje mes paimame parametrą ir išsaugome jį objekte „dataTransfer“. (Nesupainiokite dėl parametrų pavadinimo, nes spėju, kad koduodamas tai buvau kitame vardų pasaulyje :).)

IE pastaba : tai gali neveikti su IE. IE atveju geresnė praktika yra suteikti formatą kaip raktą, kaip parodyta žemiau.

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.

pavyzdžiui, norint nustatyti duomenis, naudokite ev.dataTransfer.setData(“text/plain”,id). Norėdami perskaityti duomenis, naudokitevar id = ev.dataTransfer.getData(“text”)

Kadangi mano tikslas buvo parodyti pagrindines „drag and drop“ funkcijas, kodas nebuvo optimizuotas tokiems veiksniams kaip dizainas ir pavadinimų suteikimo principai.

Sužinokite su manimi @Learner + „Fullstack“ treneris (@rajeshpillai): //twitter.com/rajeshpillai

Akcija: Specialus 10 USD kuponas „Medium“ skaitytojams mano būsimam tiesioginiam „ReactJS-Beyond“ pagrindų kursui apie „Udemy“, jei norite paremti mūsų atvirojo kodo programą „Frontend engineering“ įvaldymas per 12–20 savaičių.

Ką tik paskelbiau ankstyvosios prieigos kursą „Javascript Deep Dive“ - užkoduokite savo „React“