от Раджеша Пиллая

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

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

Основные моменты обучения:

1. сделать элемент перетаскиваемым, добавив атрибут «draggable».
2. сделать область сбросом с помощью события «dragover».
3. захватить данные перетаскивания, реализовав событие dragstart
4. захватить падение, реализовав событие «drop».
5. реализовать событие «перетаскивание», которое запускается при перетаскивании элемента
6. хранить промежуточные данные в объекте 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 (

                        


Похожие записи:

Функциональные компоненты против компонентов класса в React 
Обновление состояния из дочернего компонента Onclick 
Как передавать данные и события между компонентами в React 
Повторное воспроизведение компонента React, когда его реквизиты изменяются