
Содержание статьи
от Раджеша Пиллая
Ознакомьтесь с деталями внедрения функций перетаскивания в React с нуля.

Давайте поначалу посмотрим результат того, что мы будем строить. Я пробую .gif – надеюсь, он везде работает, как ожидалось. Я использовал Camtasia с личной лицензией.

Основные моменты обучения:
- сделать элемент перетаскиваемым, добавив атрибут «draggable».
- сделать область сбросом с помощью события «dragover».
- захватить данные перетаскивания, реализовав событие dragstart
- захватить падение, реализовав событие «drop».
- реализовать событие «перетаскивание», которое запускается при перетаскивании элемента
- хранить промежуточные данные в объекте dataTransfer
Для обучающихся визуально просмотрите видео ниже.
Шаг 1 — создайте корневую программу для демонстрации
Весь код перетаскивания переместится в компонент AppDragDropDemo.js.
import React from 'react';import ReactDOM from 'react-dom';import '.index.css';import AppDragDropDemo from './AppDragDropDemo';
ReactDOM.render(<AppDragDropDemo />, document.getElementById("root"));
Точка входа для AppDragDropDemo выглядит как нижеприведенный код.
import React, { Component } from 'react';
export default class AppDragDropDemo extends Component { render () { return ( <div className="container-drag"> DRAG & DROP DEMO </div> ); }}
Если вы запустите приложение, вы увидите этот удивительный экран (каламбур)

Шаг 2 – создать объект состояния для хранения некоторых задач
Давайте создадим несколько задач для моделирования простой программы. Мы собираемся перетащить эти задачи в разные категории, например wip
, complete
и так дальше.
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> ); }}
Шаг 3 – упорядочите наши данные по категориям
Давайте введем приведенный ниже код метод рендеринга, чтобы сгруппировать задачи в соответствующие категории, wip
и complete
. Не стесняйтесь добавлять больше категорий и играть с кодом.

Вы можете скопировать и вставить код выше из нижеследующего фрагмента.
render() { var tasks = { wip: [], complete: [] } this.state.tasks.forEach (