Jadual Kandungan
Cara melaksanakan seret dan lepas dengan react-dnd
Rumah hujung hadapan web Soal Jawab bahagian hadapan Cara react-dnd melaksanakan seret dan lepas

Cara react-dnd melaksanakan seret dan lepas

Apr 29, 2022 pm 04:49 PM
react

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.

Cara react-dnd melaksanakan seret dan lepas

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;
Salin selepas log masuk

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;
Salin selepas log masuk

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;
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara membina apl sembang masa nyata dengan React dan WebSocket Cara membina apl sembang masa nyata dengan React dan WebSocket Sep 26, 2023 pm 07:46 PM

Cara membina apl sembang masa nyata dengan React dan WebSocket

Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang Sep 28, 2023 am 10:48 AM

Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang

Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask Sep 27, 2023 am 11:09 AM

Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask

Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery Sep 26, 2023 pm 06:12 PM

Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery

Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Sep 26, 2023 pm 02:25 PM

Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Sep 28, 2023 pm 08:24 PM

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ

Cara membungkus dan menggunakan aplikasi bahagian hadapan menggunakan React dan Docker Cara membungkus dan menggunakan aplikasi bahagian hadapan menggunakan React dan Docker Sep 26, 2023 pm 03:14 PM

Cara membungkus dan menggunakan aplikasi bahagian hadapan menggunakan React dan Docker

Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan Sep 29, 2023 pm 05:45 PM

Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan

See all articles