Rect.js: внедрить функцию перетаскивания без использования внешних библиотек

Автор оригинала: FreeCodeCamp Community Member.

Rajesh Pillai

Получите детали реализации функций перетаскивания в реакцию с нуля.

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

Ключевые точки обучения:

Сделайте элемент Draggable, добавив атрибут «Draggable»
Сделайте область, пропущенную, реализуя событие «Драговер»
Захватите данные перетаскивания, реализуя событие «DRAGSTART»
Захватите падение, реализуя событие «Drop»
Реализуйте событие «Перетаскивание», которое уволен, поскольку элемент перетаскивается
Храните промежуточные данные в объекте dataTransfer

Для визуальных учащихся, отправляйтесь на видео ниже.

Шаг 1 – Создайте корневое приложение для демонстрации

Весь код для перетаскивания будет переходить в AppDragdropDemo.js компонент.

import React from 'react';import ReactDOM from 'react-dom';import '.index.css';import AppDragDropDemo from './AppDragDropDemo';

ReactDOM.render(,     document.getElementById("root"));

Точка входа для appdragdropdemo выглядит как код ниже.

import React, { Component } from 'react';

export default class AppDragDropDemo extends Component {  render () {    return (              DRAG & DROP DEMO      
    );  }}

Если вы теперь запустите приложение, вы будете представлены с этим потрясающим экраном (каламбур)

Шаг 2 – Создайте объект состояния для хранения некоторых задач

Давайте создадим некоторые задачи для моделирования простого приложения. Что мы намерены сделать, это перетаскивать эти задачи на разные категории, такие как WIP , полный , и так далее.

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 – Организуйте наши данные на категории

Давайте реализуем следующий код в методе Render, чтобы группировать задачи в их соответствующие категории, WIP и полный Отказ Не стесняйтесь добавлять больше категорий и играть с кодом.

Вы можете скопировать – вставьте код выше на приведенном ниже фрагменте.

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

В приведенном выше коде мы зацикливаем все задачи и создавая DIV для каждого элемента задач и сохраняя его в соответствующих категориях.

Итак, WIP [] Содержит все задачи в категории WIP и полный [] Содержит все выполненные задачи.

Шаг 4 – Сделайте задачу Draggleable

Добавьте атрибут Draggable на

или любого элемента, чтобы сделать элемент Draggable. Обратитесь к блоку кода выше для текстового формата кода.

Шаг 5 – Создать контейнер для передачи

Чтобы создать контейнер для переводов, реализуйте Мероприятие Dreamover Отказ Теперь, поскольку мы хотим отключить событие Dreamover по умолчанию, мы просто вызовите Event.PreventDefault () с мероприятия Drewover.

Мы также сделаем {Tasks.wip} и {tasks.complete} в их соответствующих элементах DIA.

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.

Вывод до сих пор будет выглядеть так, как показано ниже.

Шаг 6 – Захватить состояние вытаскивания элемента

Давайте изменим код, в котором мы создаем категорию для каждой задачи. Добавить EventHandler ondragstart и пройти идентификатор/имя или любую информацию, необходимую, в то время как происходит перетаскивание.

Я использую Имя как уникальное значение для идентификации задачи. Не стесняйтесь использовать ID или любой уникальный ключ, который у вас есть.

Давайте теперь реализуем ondragstart обработчик события.

В обработчике OndragStart мы получаем параметр и храните это в объекте dataTransfer. (Не путайтесь по именованию параметра, как я думаю, я был в другом мире именования во время кодировки этого:).)

То есть примечание : Это не может работать с IE. Для IE лучшая практика – дать формат в качестве ключа, как показано ниже.

Instead of

ev.dataTransfer.setData("id", id)

USE

ev.dataTransfer.setData("text/plain",id)

Вышеуказанный обработчик гарантирует, что притащиваемый элемент хранится в объекте события и доступен для использования при необходимости. Может потребоваться при падении на цель.

Теперь, если вы запустите приложение и перетащите элементы, вывод будет выводом следующие журналы.

Шаг 7 – Обработка события Drop.

Давайте откроем метод Render и добавьте OnDrop Мероприятие для Div с классовым знаком DropPable Отказ

В приведенном выше коде мы добавляем падение Обработчик событий и пройти необходимую категорию полный как аргумент. Это указывает, что мы бросаем элемент из WIP Состояние в полный Государство (категория). Пожалуйста, не стесняйтесь менять имена, по мере необходимости.

Давайте теперь реализуем OnDrop () обработчик события.

Вот код, который вы можете скопировать/вставить:

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

В OnDrop Обработчик событий, мы снимаем задачу, перетаскиваемую с помощью метода GetData в объекте DataTaTaTransfer Event.

Затем мы создаем новую массив задач, используя метод фильтра, и изменить категорию затягиваемой задачи.

setState () будет вызывать рендер, и задачи будут отображаться в правильных областях.

То есть примечание : Чтобы сделать его работать в IE, используйте метод ниже GetData.

Вместо

var.datatransfer.getdata (“ID”)

использовать

var.datatransfer.getdata (“текст”)

Шаг 8 – Для реализации падения от «завершения» на «WIP» добавьте обработчик OnDrop

OnDrop () Обработчик остается такой же, как раньше.

Наконец, запустите код и удивляйтесь на ваше творение:) и повеселитесь во время кодирования.

Вы можете взять исходный код из здесь Отказ

Примечание: Для этого на рабочий браузер работает, измените тип SetData в String. Например, чтобы установить данные, использовать ev.datatransfer.ettdata («Текст/простой», ID) Отказ Читать данные, используйте var.datatransfer.getdata (“текст”)

Поскольку моя цель состояла в том, чтобы продемонстрировать функции Core Drag и Drop, код не был оптимизирован для таких факторов, как дизайн и соглашения о именовании.

Учитесь со мной @learner + The Fullstack Coach (@rajeshpillai): https://twitter.com/rajeshpillai.

Продвижение: Special 10 $ Купон для средних читателей для моего предстоящего живого Reactjs – за пределы основы Курс на Увенми в том случае, если вы хотите поддержать нашу учебную программу с открытым исходным кодом Овладение Frontend Engineering в 12-20 недель Отказ

Просто опубликовал мой курс раннего доступа JavaScript Deep Dive – код вашего собственного реагирования