Cara react-dnd melaksanakan seret dan lepas

Kaedah pelaksanaan: 1. Gunakan "import{DndProvider}from 'react-dnd'" untuk menentukan julat boleh seret; 2. Gunakan "import{useDrag}from 'react-dnd'" untuk membungkus DragSource Just pegang komponen supaya ia boleh diseret.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Cara melaksanakan seret dan lepas dengan react-dnd

React DnD ialah set komponen peringkat tinggi React yang dicipta oleh Dan Abramov, pengarang teras React dan Redux, yang boleh membantu membina komponen kompleks sambil memastikan komponen diasingkan.

Keperluan untuk React DnD

• Menggunakan API seret dan lepas HTML5 secara lalai, tetapi menyokong

• Tidak mengendalikan DOM secara langsung

• DOM dan sumber seret dan lepas serta penyahgandingan sasaran

• Menggabungkan pencurian jenis ke dalam HTML5 drag-and-drop Idea padanan dan penghantaran data

Ciri React DnD

Fokus pada seret dan lepas, tidak tersedia Komponen siap

React DnD menyediakan satu set primitif berkuasa, tetapi ia tidak mengandungi sebarang komponen siap sedia, sebaliknya, ia membalut komponen pengguna dan menyuntik prop. Ia adalah tahap yang lebih rendah daripada UI jQuery, dsb., memfokuskan pada membuat interaksi drag-and-drop betul, dan meninggalkan kesan visual seperti sekatan koordinat kepada pengguna. Ini sebenarnya adalah prinsip pengasingan kebimbangan Sebagai contoh, React DnD tidak berhasrat untuk menyediakan komponen boleh diisih, tetapi pengguna boleh dengan cepat membangunkan mana-mana komponen boleh disusun tersuai yang diperlukan berdasarkannya.

Aliran data sehala

Ia menggunakan pemaparan deklaratif yang serupa dengan React, dan menggunakan seni bina aliran data sehala seperti redux Malah, Redux digunakan secara dalaman

Sembunyikan isu dengan API asas platform

API drag-and-drop HTML5 penuh dengan perangkap dan ketidakkonsistenan penyemak imbas. React DnD mengendalikannya secara dalaman untuk anda, jadi pengguna boleh menumpukan pada membangunkan aplikasi dan bukannya menyelesaikan masalah penyemak imbas.

Boleh diperluas dan boleh diuji

React DnD menyediakan pembalut API drag-and-drop HTML5 secara lalai, tetapi ia juga membenarkan anda menyediakan "backend" tersuai. Anda boleh membuat bahagian belakang DnD tersuai berdasarkan peristiwa sentuhan, acara tetikus atau perkara lain. Contohnya, bahagian belakang mengejek terbina dalam membolehkan anda menguji interaksi seret dan lepas komponen dalam persekitaran Nod.

Bersedia untuk masa hadapan

React DnD tidak mengeksport campuran dan berfungsi sama baik dengan mana-mana komponen, sama ada mereka menggunakan kelas ES6, createReactClass atau rangka kerja React lain Dicipta. Dan API menyokong penghias ES7.

Contohnya adalah seperti berikut:

1.1 Gunakan DndProvider untuk mentakrifkan julat boleh seret

/*
 * @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: 'flex' }}>
        <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 DragSource membalut komponen supaya ia boleh diseret

/*
 * @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. Gunakan DropTarget untuk membalut komponen supaya ia bertindak balas terhadap menyeret, melayang atau menjatuhkan item yang serasi.

/*
 * @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 ? 'Release to drop' : 'Drag item here'}
      <div
        style={{
          backgroundColor: 'pink',
          height: 30,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 17,
          fontWeight: 600,
          width: '100%',
        }}
      >
        {JSON.stringify(currentList) !== '{}' ? JSON.stringify(currentList) : '当前item'}
      </div>
    </div>
  );
};
export default TargetBox;

Seret dan lepas ke senarai ini untuk melengkapkan

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Cara react-dnd melaksanakan seret dan lepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!