de Rajesh Pillai

React.js: implementați caracteristica drag and drop fără a utiliza biblioteci externe

Intrați în detaliile despre implementarea caracteristicilor de drag and drop din React from zero.

Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci
Deci, ușor chiar și câinele tău îl poate trage 🙂

Să vedem mai întâi rezultatul a ceea ce vom construi. Încerc .gif – sperăm că funcționează peste tot așa cum era de așteptat. Am folosit Camtasia cu licență personală.

Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci
Ignorați interfața / stilurile, vă rog!

Punctele cheie de învățare sunt:

  1. faceți un element glisabil adăugând atributul „glisabil”
  2. faceți o zonă droppable prin implementarea evenimentului „dragover”
  3. capturați datele de tragere prin implementarea evenimentului „dragstart”
  4. captează picătura prin implementarea evenimentului „picătură”
  5. implementați evenimentul „drag” care este declanșat pe măsură ce elementul este tras
  6. stocați datele intermediare în obiectul DataTransfer

Pentru cursanții vizuali, accesați videoclipul de mai jos.

Pasul 1 – creați aplicația rădăcină pentru demonstrație

Tot codul pentru drag and drop va intra în componenta AppDragDropDemo.js.

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

Punctul de intrare pentru AppDragDropDemo arată ca codul de mai jos.

import React, { Component } from 'react';
export default class AppDragDropDemo extends Component {  render () {    return (      <div className="container-drag">        DRAG & DROP DEMO      </div>    );  }}

Dacă rulați acum aplicația, vi se va prezenta acest ecran minunat (joc de cuvinte)

1612022408 500 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

Pasul 2 – creați obiectul de stare pentru a stoca unele sarcini

Să creăm câteva sarcini pentru a simula o aplicație simplă. Ceea ce intenționăm să facem este să trasăm și să fixăm aceste sarcini în diferite categorii, cum ar fi wip, complete , și așa mai departe.

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 (      <div className="container-drag">        DRAG & DROP DEMO      </div>    );  }}

Pasul 3 – organizați-ne datele în categorii

Să implementăm codul de mai jos în metoda de redare, pentru a grupa sarcinile în categoriile lor respective, wip și complete. Simțiți-vă liber să adăugați mai multe categorii și să vă jucați cu codul.

1612022408 345 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

Puteți copia-lipi codul de mai sus din fragmentul de mai jos.

render() {          var tasks = { wip: [],                 complete: []          }           this.state.tasks.forEach (

În codul de mai sus, parcurgem toate activitățile și creăm un div pentru fiecare articol de activitate și îl stocăm în categoriile respective.

Asa ca wip[] conține toate sarcinile din categoria ștergere și complete[] conține toate sarcinile finalizate.

Pasul 4 - faceți elementul de activitate glisabil

Adăugați atributul glisabil la

sau la orice element pentru a face un element glisabil. Consultați blocul de cod de mai sus pentru formatul text al codului.

1612022408 365 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

Pasul 5 - creați un container droppable

Pentru a crea un container droppable, implementați dragover event. Acum, deoarece vrem să dezactivăm evenimentul implicit de glisare, apelăm simplu event.preventDefault() din evenimentul dragover.

De asemenea, vom reda {tasks.wip} și {tasks.complete} în elementele lor div corespunzătoare.

1612022408 877 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci
return (<div className="container-drag">     <h2 className="header">DRAG & DROP DEMO</h2>                       <div className="wip"        onDragOver={(e)=>this.onDragOver(e)}                           onDrop={(e)=>{this.onDrop(e, "wip")}}>                          <span className="task-header">WIP</span>                          {tasks.wip}                     </div>                     <div className="droppable"      onDragOver={(e)=>this.onDragOver(e)}                          onDrop={(e)=>this.onDrop(e, "complete")}>                           <span className="task-header">COMPLETED</span>                           {tasks.complete}                     </div>               </div>);
Let us now implement the onDragOver() event handler.
1612022409 526 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

Rezultatul de până acum va arăta ca în figura de mai jos.

1612022409 231 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

Pasul 6 - surprindeți starea elementului care este tras

Să modificăm codul în care creăm categoria pentru fiecare activitate. Adăugați un gestionar de evenimente ondragstart și treceți ID-ul / numele sau orice informație de care aveți nevoie pentru a persista în timp ce se întâmplă drag / drop.

eu folosesc name ca valoare unică pentru identificarea sarcinii. Simțiți-vă liber să folosiți ID-ul sau orice cheie unică pe care o aveți.

1612022409 374 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

Să implementăm acum onDragStart organizatorul evenimentului.

1612022409 338 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

În gestionarul onDragStart, apucăm parametrul și îl stocăm în obiectul DataTransfer. (Nu vă lăsați confundați cu numirea parametrilor, deoarece cred că am fost într-o altă lume de numire în timp ce codificați acest lucru :).)

Notă IE: este posibil să nu funcționeze cu IE. Pentru IE, cea mai bună practică este de a da formatul ca cheie, așa cum se arată mai jos.

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

Manipulatorul de mai sus se va asigura că elementul care este tras este stocat în obiectul eveniment și este disponibil pentru utilizare atunci când este necesar. S-ar putea să fie necesar în timp ce cădeți pe o țintă.

Acum, dacă rulați aplicația și trageți elementele, vor fi afișate următoarele jurnale.

1612022410 277 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

Pasul 7 - gestionați evenimentul drop.

Să deschidem metoda de redare și să adăugăm onDrop eveniment la div cu un className de droppable.

1612022410 27 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

În codul de mai sus, adăugăm drop de gestionare a evenimentelor și treceți categoria necesară complete ca argument. Acest lucru indică faptul că eliminăm elementul din wip stat la complete stat (categorie). Vă rugăm să nu ezitați să schimbați numele, după cum este necesar.

Să implementăm acum onDrop() organizatorul evenimentului.

1612022410 679 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

Iată codul pe care îl puteți copia / lipi:

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

În onDrop handler de eveniment, preluăm sarcina care este târâtă folosind metoda getData pe obiectul DataTransfer al evenimentului.

Apoi creăm o nouă matrice de activități utilizând metoda filtrului și schimbăm categoria sarcinii care este trasă.

setState() va declanșa redarea, iar sarcinile vor fi redate în zonele potrivite.

Notă IE: Pentru a funcționa în IE, utilizați metoda getData de mai jos.

În loc de

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

utilizare

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

Pasul 8 - pentru a implementa scăderea de la „complet” la „ștergeți”, adăugați handDr manipulatorul

onDrop() handler rămâne același ca mai devreme.

1612022411 469 Reactjs implementati caracteristica drag and drop fara a utiliza biblioteci

În cele din urmă, rulați codul și minunați-vă de creația dvs. 🙂 și distrați-vă în timp ce codificați.

Puteți prelua codul sursă de la Aici.

Notă: pentru ca acest lucru să funcționeze pe browser, schimbați tipul setData în șir.
de exemplu, pentru a seta date, utilizați ev.dataTransfer.setData(“text/plain”,id). Pentru a citi date, utilizați var id = ev.dataTransfer.getData(“text”)

Întrucât scopul meu a fost să demonstrez caracteristicile principale de drag and drop, codul nu a fost optimizat pentru factori precum convențiile de proiectare și denumire.

Aflați cu mine @Learner + Fullstack Coach (@rajeshpillai): https://twitter.com/rajeshpillai

Promoție: cupon special de 10 $ pentru cititorii Medium pentru live-ul meu viitor ReactJS-Dincolo de elementele de bază curs despre Udemy în cazul în care doriți să susțineți curriculum-ul nostru open source Stăpânirea ingineriei frontend în 12 până la 20 de săptămâni.

Tocmai am publicat cursul meu de acces timpuriu Javascript Deep Dive - Codifică-ți propriul React



#Reactjs #implementați #caracteristica #drag #drop #fără #utiliza #biblioteci #externe

React.js: implementați caracteristica drag and drop fără a utiliza biblioteci externe