Comment réagir-dnd implémente le glisser-déposer

Méthode d'implémentation : 1. Utilisez "import{DndProvider}from 'react-dnd'" pour définir une plage déplaçable ; 2. Utilisez "import{useDrag}from 'react-dnd'" pour envelopper le DragSource autour du composant afin que On peut le faire glisser.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Comment implémenter le glisser-déposer avec React-dnd

React DnD est un ensemble de composants d'ordre supérieur React créés par Dan Abramov, l'auteur principal de React et Redux, qui peuvent aider à créer des interfaces glisser-déposer complexes tout en garder les composants séparés.

Exigences pour React DnD

• Utiliser l'API glisser-déposer HTML5 par défaut, mais prendre en charge

• Ne pas exploiter directement DOM

• glisser-déposer la source et la cible

• Intégrer Voler l'idée de correspondance de type et de transmission de données dans le glisser-déposer HTML5

Caractéristiques de React DnD

Concentrez-vous sur le glisser-déposer, sans fournir de composants prêts à l'emploi

React DnD fournit un ensemble de primitives puissantes, mais il ne contient aucun composant prêt à l'emploi, mais enveloppe les composants de l'utilisateur et injecte des accessoires. Il est de niveau inférieur à celui de jQuery UI, etc., se concentrant sur la correction des interactions par glisser-déposer et laissant les effets visuels tels que les restrictions de coordonnées à l'utilisateur. Il s'agit en fait d'un principe de séparation des préoccupations. Par exemple, React DnD n'a pas l'intention de fournir des composants triables, mais les utilisateurs peuvent rapidement développer tous les composants triables personnalisés requis sur cette base.

Flux de données unidirectionnel

Semblable à React, il adopte le rendu déclaratif et utilise une architecture de flux de données unidirectionnel comme Redux. En fait, Redux est utilisé en interne

masquer les problèmes de l'API sous-jacente de la plateforme.

HTML5 L'API glisser-déposer est pleine de pièges et d'incohérences du navigateur. React DnD les gère en interne pour vous, afin que les utilisateurs puissent se concentrer sur le développement d'applications plutôt que sur la résolution des problèmes de navigateur.

Extensible et testable

React DnD fournit par défaut un wrapper d'API glisser-déposer HTML5, mais il vous permet également de fournir un "backend" personnalisé. Vous pouvez créer un backend DnD personnalisé basé sur des événements tactiles, des événements de souris ou d'autres éléments. Par exemple, le backend moqueur intégré vous permet de tester les interactions glisser-déposer des composants dans un environnement Node.

Future ready

React DnD n'exporte pas de mixins et fonctionne aussi bien avec n'importe quel composant, qu'ils soient créés à l'aide de classes ES6, createReactClass ou d'autres frameworks React. Et l'API prend en charge les décorateurs ES7.

Les exemples sont les suivants :

1.1. Utilisez DndProvider pour définir une plage déplaçable

/*
 * @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. Utilisez DragSource pour envelopper le composant afin qu'il puisse être déplacé

/*
 * @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;

3. , Faites-le réagir au glisser, au survol ou à la chute d'éléments compatibles.

/*
 * @Author: muge
 * @Date: 2021-12-07 14:26:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-08 14:33:08
 */
import React from 'react';
import { useDrop } from 'react-dnd';
const ItemTypes = {
  BOX: 'box',
};
const style: any = {
  border: '1px solid gray',
  height: '15rem',
  width: '15rem',
  padding: '2rem',
  textAlign: 'center',
};
const TargetBox = ({ currentList }: any) => {
  const [{ isActive, isOver, canDrop }, drop] = useDrop(() => ({
    accept: ItemTypes.BOX,
    collect: (monitor) => ({
      isActive: monitor.canDrop() && monitor.isOver(),
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
    // hover: (item, monitor) => {
    //   console.log(item, 'item');
    //   console.log(monitor, 'monitor');
    // },
  }));
  // console.log(isOver, 'isOver');
  // console.log(canDrop, 'canDrop');
  return (
    <div ref={drop} style={style}>
      {isActive ? &#39;Release to drop&#39; : &#39;Drag item here&#39;}
      <div
        style={{
          backgroundColor: &#39;pink&#39;,
          height: 30,
          display: &#39;flex&#39;,
          alignItems: &#39;center&#39;,
          justifyContent: &#39;center&#39;,
          fontSize: 17,
          fontWeight: 600,
          width: &#39;100%&#39;,
        }}
      >
        {JSON.stringify(currentList) !== &#39;{}&#39; ? JSON.stringify(currentList) : &#39;当前item&#39;}
      </div>
    </div>
  );
};
export default TargetBox;

Faites glisser et déposez sur cette liste pour compléter

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!