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

1656634089 realizovat funkcziyu peretaskivaniya bez ispolzovaniya vneshnih bibliotek

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

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

1*hPLhe5cqPbyE8Hi4CGQMYg
Так что легко, даже ваша собака может тянуть это 🙂

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

1*Y11YSJEJ9A4JFGllOQSroQ
Игнорируйте интерфейс/стили, пожалуйста!

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

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

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

1*16qtjJ6Bh53hsY2z4oi2gw

Шаг 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. Не стесняйтесь добавлять больше категорий и играть с кодом.

1*u7edSd4vxCBW_JMnA1qbYA

Вы можете скопировать и вставить код выше из нижеследующего фрагмента.

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

Добавить комментарий

Ваш адрес email не будет опубликован.