Rect.js / redux + drag & drop

В моем самым последнем проекте «Trenhouse» пользователи управляют пробелами, которые могут содержать любое количество домашних растений. Одним из моих целей с этим проектом было включение столько интерактивных функций, так как я мог обеспечить текучий пользовательский опыт. Перетаскивание было большим шагом к этой цели. Я хотел иметь возможность перетаскивать растения между промежутками и обновлять содержащие компоненты комнаты соответствующим образом, и достигая этого было относительно прямой, чтобы включить с моим сборкой Redux.

Мы начинаем с двумя основными компонентами: установка и космическую карту. Я более знаком с классовыми компонентами, но эта функциональность может также быть достижена с использованием функциональных компонентов.

Первый, Наша установка

## PlantCard.js

import React, { Component } from 'react';

class PlantCard extends Component {

  # unrelated PlantCard functionality goes up here

  render() {
    return(
      

        # plant information goes here
      
    );
  }
}

export default PlantCard

…потом Наша косметика

## SpaceCard.js

import React, { Component } from 'react';

class SpaceCard extends Component {

  # unrelated SpaceCard functionality goes up here

  render() {
    return(
      

        

          # space info goes here
        
        

          {this.props.plants.map(plant => )}
        
      
    );
  }
}

export default SpaceCard

С нашими основными компонентами настроены, мы можем построить в нашей функциональности перетаскивания. Во-первых, мы расскажем о нашей установке притащителя.

dragStart = event = {
  const plant = JSON.stringify(this.props.plant);
  event.dataTransfer.setData('plant', plant);
}

Когда кнопка мыши удерживается и вытащивается от компонента растительного раста, компонент PROP хранится в объекте DataTransfer в соответствии с ключевым словом растение Отказ

В качестве защиты, чтобы предотвратить странные графические проблемы, мы также можем добавить эту функцию к нашему компоненту класса PlantCard:

dragOver = event => {
  event.stopPropagation();
}

Наконец, мы приложим эти функции к элементам HTML, предоставляемые компонентом, а также назначают «true» к атрибуту «Draggable».

render () {
  return(
    

      # Plant information goes here
    
  );
}

Что касается способности нашей SpaceCard получать сброшенные установки, мы будем следовать подобным шаблону, как и раньше. Во-первых, следует отметить, что D & D не будет работать, если приемный элемент не имеет функции «на перетаскивание», поэтому мы определим это с помощью универсального Event.PreventDefault () в качестве защиты для непреднамеренного поведения.

dragOver = event => {
  event.preventDefault();
}

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

drop = event => {
  event.preventDefault();
  const plant = JSON.parse(event.dataTransfer.getData('plant'));
  plant.spaceId = this.props.space.id;
  this.props.editPlant(plant);
}

Там есть много, поэтому мы сломаем его по линии. Мы начинаем с базового PreventDefault () снова как улов все (желаю) для ненужных проблем. Далее мы получаем доступ к данным завода, которые мы спасли, попросив этого ключевого слова «завода» из объекта DataTaTransfer, установив его в переменной. Мы принимаем эту переменную, измените необходимые атрибуты (SpaceID в этом случае), а затем пропустите его в функцию отправки, предоставленной нашим магазином Redux. Ради краткости я пропустил процесс подключения компонентов в магазин.

Наконец, мы можем сообщить HTML все об этом с еще несколькими изменениями:

render() {
  return(
    

      

        # space info goes here
      
      

        {this.props.plants.map(plant => )}
      
    
  );
}

В конце концов, вы получите то, что может сделать немного танца, как это:

Оригинал: “https://dev.to/spenser6131/react-js-drag-drop-2ne9”