搜尋
首頁web前端前端問答react-dnd怎麼實現拖曳

實作方法:1、利用「import{DndProvider}from 'react-dnd'」定義一個可拖曳的範圍;2、利用「import{useDrag}from 'react-dnd'」將DragSource包裹住組件,使其可以拖曳即可。

react-dnd怎麼實現拖曳

本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react-dnd怎麼實現拖曳

React DnD是React和Redux核心作者Dan Abramov創造的一組React 高階元件,可以在保持元件分離的前提下幫助建構複雜的拖放接口。

React DnD 的需求

  • #預設使用HTML5 拖放API,但支援

  • #不直接操作DOM

  • DOM 和拖曳的來源和目標解耦

  • 融入HTML5拖曳中竊取類型匹配和資料傳遞的想法

React DnD 的特徵

專注拖曳,不提供現成元件

React DnD提供了一組強大的原語,但它不包含任何現成元件,而是採用包裝使用者的元件並注入props 的方式。它比jQuery UI等更底層,專注於使拖放互動正確,而把視覺方面的效果例如座標限制交給使用者處理。這其實是一種關注點分離的原則,例如React DnD不打算提供可排序元件,但使用者可以基於它快速開發任何需要的自訂的可排序元件。

單向資料流

類似於React 一樣採取宣告式渲染,並且像redux 一樣採用單向資料流架構,實際上內部使用了Redux

隱藏了平台底層API的問題

HTML5拖放API充滿了陷阱和瀏覽器的不一致。 React DnD為您內部處理它們,因此用戶可以專注於開發應用程式而不是解決瀏覽器問題。

可擴展可測試

React DnD預設提供了HTML5拖放API封裝,但它也允許您提供自訂的「後端(backend)」。您可以根據觸控事件,滑鼠事件或其他內容建立自訂DnD後端。例如,內建的模擬後端可讓您測試Node環境中元件的拖放互動。

為未來做好了準備

React DnD不會匯出mixins,並且對任何元件同樣有效,無論它們是使用ES6類,createReactClass還是其他React框架創建的。而且API支援了ES7 裝飾器。

範例如下:

1.1.使用DndProvider定義一個可以拖曳的範圍

/*
 * @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 id="拖拽源组件-nbsp-列表-树">拖拽源组件 列表-----树</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 id="拖拽放置目标">拖拽放置目标</h1>
      {/* 拖拽最终放置组件 */}
      <TargetBox currentList={currentList} />
    </DndProvider>
  );
};
export default Container;

2.使用DragSource 包裹住組件,使其可以進行拖曳

/*
 * @Author: muge
 * @Date: 2021-12-07 14:26:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-08 14:18:52
 */
import { useDrag } from &#39;react-dnd&#39;;
const ItemTypes = {
  BOX: &#39;box&#39;,
};
const style = {
  border: &#39;1px dashed gray&#39;,
  backgroundColor: &#39;white&#39;,
  padding: &#39;0.5rem 1rem&#39;,
  marginRight: &#39;1rem&#39;,
  marginBottom: &#39;1rem&#39;,
  cursor: &#39;move&#39;,
};
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, &#39;monitor131&#39;);
        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.使用DropTarget 包裹住組件,使其對拖曳,懸停或dropped 的兼容項目做出反應。

/*
 * @Author: muge
 * @Date: 2021-12-07 14:26:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-08 14:33:08
 */
import React from &#39;react&#39;;
import { useDrop } from &#39;react-dnd&#39;;
const ItemTypes = {
  BOX: &#39;box&#39;,
};
const style: any = {
  border: &#39;1px solid gray&#39;,
  height: &#39;15rem&#39;,
  width: &#39;15rem&#39;,
  padding: &#39;2rem&#39;,
  textAlign: &#39;center&#39;,
};
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, &#39;item&#39;);
    //   console.log(monitor, &#39;monitor&#39;);
    // },
  }));
  // console.log(isOver, &#39;isOver&#39;);
  // console.log(canDrop, &#39;canDrop&#39;);
  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;

到此清單拖曳即可完成

推薦學習:《react影片教學

以上是react-dnd怎麼實現拖曳的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
usestate()與用戶ducer():為您的狀態需求選擇正確的掛鉤usestate()與用戶ducer():為您的狀態需求選擇正確的掛鉤Apr 24, 2025 pm 05:13 PM

selectUsestate()forsimple,獨立的variables; useusereducer()forcomplexstateLogicorWhenStatedIppedsonPreviousState.1)usestate()isidealForsImpleupDatesLikeToggGlikGlingaBglingAboolAboolAupDatingacount.2

使用usestate()管理狀態:實用教程使用usestate()管理狀態:實用教程Apr 24, 2025 pm 05:05 PM

useState優於類組件和其它狀態管理方案,因為它簡化了狀態管理,使代碼更清晰、更易讀,並與React的聲明性本質一致。 1)useState允許在函數組件中直接聲明狀態變量,2)它通過鉤子機制在重新渲染間記住狀態,3)使用useState可以利用React的優化如備忘錄化,提升性能,4)但需注意只能在組件頂層或自定義鉤子中調用,避免在循環、條件或嵌套函數中使用。

何時使用usestate()以及何時考慮替代狀態管理解決方案何時使用usestate()以及何時考慮替代狀態管理解決方案Apr 24, 2025 pm 04:49 PM

useUsestate()forlocalComponentStateMangementighatighation; 1)usestate()isidealforsimple,localforsimple.2)useglobalstate.2)useglobalstateSolutionsLikErcontExtforsharedState.3)

React的可重複使用的組件:增強代碼可維護性和效率React的可重複使用的組件:增強代碼可維護性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionActActRossDifferentPartSofanApplicationorprojects.1)heSredunceRedUndenceNandSimplifyUpdates.2)yensureconsistencyInuserexperience.3)

反應中的虛擬DOM:通過有效更新來提高性能反應中的虛擬DOM:通過有效更新來提高性能Apr 24, 2025 pm 04:41 PM

TheVirtualDOMisalightweightin-memorycopyoftherealDOMusedbyReacttooptimizeUIupdates.ItboostsperformancebyminimizingdirectDOMmanipulationthroughaprocessofupdatingtheVirtualDOMfirst,thenapplyingonlynecessarychangestotheactualDOM.

HTML和React的集成:實用指南HTML和React的集成:實用指南Apr 21, 2025 am 12:16 AM

HTML與React可以通過JSX無縫整合,構建高效的用戶界面。 1)使用JSX嵌入HTML元素,2)利用虛擬DOM優化渲染性能,3)通過組件化管理和渲染HTML結構。這種整合方式不僅直觀,還能提升應用性能。

React和HTML:渲染數據和處理事件React和HTML:渲染數據和處理事件Apr 20, 2025 am 12:21 AM

React通過state和props高效渲染數據,並通過合成事件系統處理用戶事件。 1)使用useState管理狀態,如計數器示例。 2)事件處理通過在JSX中添加函數實現,如按鈕點擊。 3)渲染列表需使用key屬性,如TodoList組件。 4)表單處理需使用useState和e.preventDefault(),如Form組件。

後端連接:反應如何與服務器互動後端連接:反應如何與服務器互動Apr 20, 2025 am 12:19 AM

React通過HTTP請求與服務器交互,實現數據的獲取、發送、更新和刪除。 1)用戶操作觸發事件,2)發起HTTP請求,3)處理服務器響應,4)更新組件狀態並重新渲染。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。