Wie React-DND Drag & Drop implementiert

Implementierungsmethode: 1. Verwenden Sie „import{DndProvider}from ‚react-dnd‘“, um einen ziehbaren Bereich zu definieren. 2. Verwenden Sie „import{useDrag}from ‚react-dnd‘“, um die DragSource so um die Komponente zu wickeln Es kann gezogen werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

So implementieren Sie Drag & Drop mit React-DND

React DnD ist eine Reihe von React-Komponenten höherer Ordnung, die von Dan Abramov, dem Hauptautor von React und Redux, erstellt wurden und dabei helfen können, komplexe Drag-and-Drop-Schnittstellen zu erstellen Komponenten getrennt halten. „Anforderungen für React DnD“

Integrieren Die Idee des Typvergleichs und der Datenübergabe in HTML5 per Drag & Drop stehlen

Funktionen von React DnD
• Konzentrieren Sie sich auf Drag & Drop, nicht auf die Bereitstellung vorgefertigter Komponenten

React DnD bietet Eine Reihe leistungsstarker Grundelemente, die jedoch keine vorgefertigten Komponenten enthalten, sondern stattdessen die Komponenten des Benutzers umschließen und Requisiten injizieren. Es ist eine niedrigere Ebene als die jQuery-Benutzeroberfläche usw. und konzentriert sich darauf, Drag-and-Drop-Interaktionen korrekt durchzuführen und visuelle Effekte wie Koordinatenbeschränkungen dem Benutzer zu überlassen. Dabei handelt es sich eigentlich um ein Prinzip der Interessenstrennung. Beispielsweise beabsichtigt React DnD nicht, sortierbare Komponenten bereitzustellen, aber Benutzer können darauf basierend schnell alle erforderlichen benutzerdefinierten sortierbaren Komponenten entwickeln.

• Einseitiger Datenfluss

• Ähnlich wie React verwendet es deklaratives Rendering und verwendet eine unidirektionale Datenflussarchitektur wie Redux. Tatsächlich wird Redux intern verwendet

die Probleme der zugrunde liegenden API der Plattform verbergen

HTML5 Die Drag-and-Drop-API ist voller Fallstricke und Browser-Inkonsistenzen. React DnD übernimmt diese intern für Sie, sodass sich Benutzer auf die Entwicklung von Anwendungen konzentrieren können, anstatt Browserprobleme zu lösen.

Erweiterbar und testbar

React DnD bietet standardmäßig einen HTML5-Drag-and-Drop-API-Wrapper, ermöglicht Ihnen aber auch die Bereitstellung eines benutzerdefinierten „Backends“. Sie können ein benutzerdefiniertes DnD-Backend basierend auf Berührungsereignissen, Mausereignissen oder anderen Dingen erstellen. Mit dem integrierten Mock-Backend können Sie beispielsweise Drag-and-Drop-Interaktionen von Komponenten in einer Node-Umgebung testen.

Zukunftsbereit

React DnD exportiert keine Mixins und funktioniert mit jeder Komponente gleich gut, unabhängig davon, ob sie mit ES6-Klassen, createReactClass oder anderen React-Frameworks erstellt wurden. Und die API unterstützt ES7-Dekoratoren.

Beispiele sind wie folgt:

1.1. Verwenden Sie DndProvider, um einen ziehbaren Bereich zu definieren

/*
 * @Author: muge
 * @Date: 2021-12-04 16:59:25
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-08 14:24:47
 */
import React, { useState } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import SourceBox from './SourceBox';
import TargetBox from './TargetBox';
import TreeBox from './TreeBox';
const item: any[] = [
  {
    id: 1,
    name: 'muge',
  },
  {
    id: 2,
    name: 'muxi',
  },
  {
    id: 3,
    name: 'mugege',
  },
];
const Container = () => {
  // 当前拖拽项
  const [currentList, setCurrentList] = useState<any>({});
  return (
    // 类似redux数据传输  需要在最外层包裹对象
    <DndProvider backend={HTML5Backend}>
      <h1>拖拽源组件 列表-----树</h1>
      <div style={{ display: &#39;flex&#39; }}>
        <div>
          {/* 列表拖拽源 */}
          {item.map((itemz: any, index: number) => (
            <SourceBox setCurrentList={setCurrentList} item={itemz} key={index} />
          ))}
        </div>
        {/* 注意，不要树组件整体直接设置拖拽，抽成一个组件来遍历每一项 =》自定义渲染*/}
        {/* 树形拖拽源 */}
        <TreeBox />
      </div>
      <h1>拖拽放置目标</h1>
      {/* 拖拽最终放置组件 */}
      <TargetBox currentList={currentList} />
    </DndProvider>
  );
};
export default Container;

2. Verwenden Sie DragSource, um die Komponente zu umschließen, damit sie gezogen werden kann , Lassen Sie es auf das Ziehen, Schweben oder Ablegen kompatibler Elemente reagieren.

/*
 * @Author: muge
 * @Date: 2021-12-07 14:26:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-08 14:18:52
 */
import { useDrag } from 'react-dnd';
const ItemTypes = {
  BOX: 'box',
};
const style = {
  border: '1px dashed gray',
  backgroundColor: 'white',
  padding: '0.5rem 1rem',
  marginRight: '1rem',
  marginBottom: '1rem',
  cursor: 'move',
};
const SourceBox = ({ item, setCurrentList }: any) => {
  const [{ opacity }, drag] = useDrag(
    () => ({
      type: ItemTypes.BOX,
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.4 : 1,
      }),
      item: () => item, //返回当前列表项数据
      canDrag: (monitor) => {
        //是否取消拖拽
        console.log(monitor, 'monitor131');
        return true;
      },
      //
      end(currentItem, monitor) {
        // monitor.getDropResult(); //获取拖拽对象所处容器的数据
        // monitor.didDrop(); // 当前容器能否放置拖拽对象 拖动停止时触发
        monitor.didDrop() && setCurrentList(currentItem); //在容器点松开 才赋值
      },
    }),
    [],
  );
  return (
    <div ref={drag} style={{ ...style, opacity }}>
      {item.id}------{item.name}
    </div>
  );
};
export default SourceBox;

Zum Vervollständigen per Drag & Drop auf diese Liste ziehen

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWie React-DND Drag & Drop implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!