Визуальное перетаскивание на основе макета реагирующей сетки

React.js
Визуальное перетаскивание на основе макета реагирующей сетки

предисловие

Друзья, работающие с интерфейсом, часто могут сталкиваться с необходимостью создания пользовательской панели инструментов. Так что же такое настраиваемая панель инструментов? Пользовательская информационная панель на самом деле является пользовательской панелью. Пользователи могут свободно перетаскивать, добавлять и удалять компоненты на панели. Компоненты могут быть различными графическими диаграммами или различными таблицами данных. С помощью комбинации перетаскивания различных компонентов пользователи могут настраивать панели, которые они хотят видеть.

Предварительный просмотр проекта

демонстрационный адрес

Адрес источника

QQ20190514-131658-HD-compress.gif
Компоненты можно динамически добавлять, удалять, перетаскивать и свободно масштабировать. И после масштабирования диаграмма echarts внутри компонента также будет увеличена.

Технологическая архитектура

  1. Внешний фреймворк:React
  2. Библиотека пользовательского интерфейса:Ant Design
  3. строительные леса:create-react-app
  4. Перетащите плагин:react-grid-layout

Техническая реализация

1. Установите пакет react-grid-layout с помощью npm.
npm install react-grid-layout
2. Объявление плагина и введение в стиль

Во-первых, добавьте компоненты WidthProvider и Responsive в файл js и создайте экземпляры адаптивных компонентов перетаскивания. Во-вторых, введите стиль плагина в файл css.

import { WidthProvider, Responsive } from "react-grid-layout";
const ResponsiveReactGridLayout = WidthProvider(Responsive);

@import '~react-grid-layout/css/styles.css';
@import '~react-resizable/css/styles.css';
3. Рендеринг

Рендеринг перетаскиваемых макетов в методе рендеринга React. Компонент ResponsiveReactGridLayout имеет несколько свойств, вот еще несколько важных пояснений:

  • cols: определяет, как адаптивный макет делится на несколько столбцов.
  • rowHeight: высота строки компонента в адаптивном макете.
  • onLayoutChange: эта функция срабатывает, когда компонент в адаптивном макете перетаскивается или увеличивается или уменьшается.
<ResponsiveReactGridLayout
    className="layout"
    {...this.props}
    layouts={this.state.layouts}
    onLayoutChange={(layout, layouts) =>
              this.onLayoutChange(layout, layouts)
            }
   >
     {this.generateDOM()}
</ResponsiveReactGridLayout>
4. Генерация DOM компонентов

Компоненты макета генерируются функцией generateDOM.Во-первых, массив компонентов просматривается, и тип каждого компонента используется для определения того, следует ли создавать компонент столбчатой ​​диаграммы, компонент полилинии или компонент круговой диаграммы. Каждый компонент должен определять глобально уникальное значение ключа. data-grid привязывает свои свойства к каждому компоненту. Конкретные свойства сетки данных описаны ниже.

 generateDOM = () => {
    return _.map(this.state.widgets, (l, i) => {
      let option;
      if (l.type === 'bar') {
        option = getBarChart();
      }else if (l.type === 'line') {
        option = getLineChart();
      }else if (l.type === 'pie') {
        option = getPieChart();
      }
      let component = (
        <ReactEcharts
          option={option}
          notMerge={true}
          lazyUpdate={true}
          style={{width: '100%',height:'100%'}}
        />
      )
      return (
        <div key={l.i} data-grid={l}>
          <span className='remove' onClick={this.onRemoveItem.bind(this, i)}>x</span>
          {component}
        </div>
      );
    });
  };
5. Добавьте компоненты через функцию addItem.

Свойства каждого компонента следующие:

  • x: координата компонента по оси X
  • y: координата компонента по оси Y
  • w: ширина компонента
  • h: высота компонента
  • i: значение ключа компонента
addItem(type,widgetId) {
    const addItem = {
      x: (this.state.widgets.length * 2) % (this.state.cols || 12),
      y: Infinity, // puts it at the bottom
      w: 2,
      h: 2,
      i: widgetId || new Date().getTime().toString(),
    };
    this.setState(
      {
        widgets: this.state.widgets.concat({
          ...addItem,
          type,
        }),
      },
    );
  };
6. Удалите надстройку с помощью функции onRemoveItem.
onRemoveItem(i) {
    console.log(this.state.widgets)
    this.setState({
      widgets: this.state.widgets.filter((item,index) => index !=i)
    });

  }

постскриптум

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

Если вы думаете, что это хорошо, не забудьте поставить лайк, спасибо😂

Добро пожаловать, чтобы следовать за мной:【Блог】【Гитхаб】【Наггетс】【Краткая книга】

Категории