react实现组件拖拽自定义模板(react-dnd),组件自定义大小功能(react-rnd...
发布网友
发布时间：2024-10-03 04:34
共1个回答
热心网友
时间：2024-10-21 10:36
前言:之前需要做一个关于拖拽实现自定义模板的功能一开始也是一脸懵逼的,后面通过查询一些资料和广大群友的帮助完成了该功能!该文章仅介绍功能所需内容不做过多的功能介绍,第一次记录,不喜勿喷!
正文:本文章只做必要的解释,大部分解释在代码中!一:react-dnd,官网地址:https://react-dnd.github.io/react-dnd/docs/tutorial1.1下载yarnaddreact-dndreact-dnd-html5-backendnpminstallreact-dndreact-dnd-html5-backend1.2引入index.jsximport{DndProvider}from'react-dnd';import{HTML5Backend}from'react-dnd-html5-backend';constreactDnd=()=>{return(<divclassName="AppBox"><DndProviderbackend={HTML5Backend}><Ground/></DndProvider></div>)}exportdefaultreactDnd;DndProvider:组件的应用程序提供React-DnD功能。必须通过backendc参数将其注入后端，但是也可以将其注入window对象。(可以理解为:拖拽发生在DndProvider这个盒子里面)
1.3拖拽盒子Container.jsxconstContainer=()=>{const[dataType,setDataType]=useState()const[wh,setWh]=useState({leftWidth:0,rightWidth:0})useEffect(()=>{setTimeout(()=>{vardiv=document.getElementById("GroudBox_left");varw=Math.round(div.offsetWidth);varh=Math.round(div.offsetHeight);setWh({leftWidth:w,rightWidth:h})},500)},[])//拖拽组件数据letlist=[{title:'Dragmearound3',id:3,left:0,top:0,style:{width:"100px",height:"100px",background:"darkkhaki"}]constdata={setDataType,dataType,list,wh}return(<divclassName="GroudBox"id="GroudBox"><divclassName="GroudBox_left"id="GroudBox_left">//拖拽组件{list.map((item,index)=>{return(<Btnkey={index}item={item}{...data}/>)})}</div><divclassName="GroudBox_right"><DustBin{...data}/>//拖拽模板</div></div>)}exportdefaultContainer;这个组件很简单,包含了一个左侧需要拖拽的组件右侧的一个拖拽进的模板
1.4被拖拽的组件Btn.jsxuseDrag:声明拖动源,用于将当前组件用作拖动源的钩子(drag这个组件的是用来拖拽的)
import{Button}from"antd";import{useDrag,useDrop}from"react-dnd";import{ItemTypes}from"../ItemTypes";constBtn=({item,setDataType})=>{const[{isDragging},drag]=useDrag(()=>({type:ItemTypes.BOX,//必填，并且必须是字符串，ES6符号。只有注册为相同类型的放置目标才会对此项目做出反应end:(monitor)=>{console.log("拖动的组件",item);setDataType(item)},//监听collect:(monitor)=>({//监听是否在动isDragging:monitor.isDragging(),getDropResult:monitor.getDropResult()})}))return(<Buttonref={drag}type="primary"style={{marginTop:"1rem"}}>组件{item.id}</Button>)}exportdefaultBtn;1.5ItemTypes.jsxexportconstItemTypes={BOX:'box',}主要是绑定type的目标类型
1.6拖拽模板DustBin.jsxuseDrag:声明拖动范围,用于将拖动源的钩子拖入的范围(drop这个组件接受来拖拽来的组件)
import{useState,useEffect,useCallback}from'react'import{useDrop}from'react-dnd'import{ItemTypes}from'../ItemTypes.js';import{Rnd}from"react-rnd";letdata,boxconstDustBin=({dataType,list,wh})=>{const[boxes,setBoxes]=useState([{top:20,left:80,title:'Dragmearound',id:1},{top:180,left:20,title:'Dragmetoo',id:2},])//当前组件拖动constmoveBox=useCallback((id,left,top)=>{boxes.forEach(item=>{if(item.id===id){item.left=leftitem.top=top}})setBoxes([...boxes])},[boxes,setBoxes],)const[,drop]=useDrop(()=>({accept:ItemTypes.BOX,drop(item,monitor){console.log(item)//拖动的组件数据},}),[moveBox],)return(<divref={drop}className="template">//拖入的组件{boxes.map(item)=>{return(<div>{item.title}</div>)}}</div>)}exportdefaultDustBin;drop(item,monitor):选填。当兼容项目放在目标上时调用。您可以返回undefined或纯对象。如果返回一个对象，它将成为放置结果，并且可用于其拖动源中的endDrag方法monitor.getDropResult()。主要的作用是获取拖动后获取当前组件最后的X,Y的值(monitor.getDifferenceFromInitialOffset())
后面发现react-dnd只能拖动组件在拖入模板盒子的时候无法获取到当前的数据,所以无法满足从左拖拽到右放入模板盒子,可能是没有仔细看官网的缘故,有其他办法的没有小伙伴可以留言,下面是我的解决方案DustBin.jsx完整代码
import{useState,useEffect,useCallback}from'react'importupdatefrom'immutability-helper'import{useDrop}from'react-dnd'import{ItemTypes}from'../ItemTypes.js';letdata,boxconstDustBin=({dataType,list,wh})=>{const[boxes,setBoxes]=useState([])const[typeId,setTypeId]=useState()useEffect(()=>{console.log("拿到的组件",dataType);data=dataType},[dataType])useEffect(()=>{console.log("拿到的宽高",wh);box=wh},[wh])//当前组件拖动constmoveBox=useCallback((id,left,top)=>{boxes.forEach(item=>{if(item.id===id){item.left=leftitem.top=top}})setBoxes([...boxes])},[boxes,setBoxes],)//新组件拖入constnewMoveBox=useCallback((id,left,top)=>{list.forEach(item=>{if(item.id===id){item.left=leftitem.top=topboxes.push(item)}})setBoxes([...boxes])},[boxes,setBoxes],)const[,drop]=useDrop(()=>({accept:ItemTypes.BOX,drop(item,monitor){constdelta=monitor.getDifferenceFromInitialOffset()constnewdelta=monitor.getClientOffset()if(item.id){constleft=Math.round(item.left+delta.x)consttop=Math.round(item.top+delta.y)moveBox(item.id,left,top)}else{constleft=Math.round(delta.x-box.leftWidth)consttop=Math.round(newdelta.y)setTimeout(()=>{console.log(data);newMoveBox(data.id,left,top)},500)}returnundefined},}),[moveBox],)useEffect(()=>{console.log(boxes);},[boxes])constboxDataBtn=(id,x,y)=>{console.log(id,x,y);boxes.forEach(item=>{if(item.id===id){item.left=310;item.top=224;console.log(item);}})setBoxes([...boxes])}constfunctionBtn={boxDataBtn}return(<divref={drop}className="template">{boxes.map((key,index,)=>{const{id,left,top,style}=keyreturn(<div>222</div>)})}</div>)}exportdefaultDustBin;简单说明一下,在Btn.jsx中的useDrag里面获取到被拖拽的组件(见Btn.jsx-14行)后再放入DustBin.jsx的boxes中这样就能准确的拿到当前拖拽的组件放入模板中了!
二:react-rnd地址:https://github.com/bokuweb/react-rnd这是一个自定义组件的拖动,大小的一个插件
下载npmi-Sreact-rnd
yarnaddreact-rnd
2.1使用import{Rnd}from"react-rnd";constDustBin=({dataType,list,wh})=>{return(<Rndkey={key.id+index}default={{x:left,y:top,width:200,height:200}}bounds="parent"//拖动范围/*parent限制节点的offsetParent内的移动（位置相对或绝对的最近节点）window,body,或选择器，如.fooClassName*/style={{position:'absolute',cursor:"pointer",left,top,...style}}onDragStop={(e,d)=>{console.log(d.x,d.y);console.log(id);}}lockAspectRatio={false}//盒子的尺寸列如(16/9)className="rndBox"onResizeStop={(e,direction,ref,delta,position)=>{//this.setState({//width:ref.style.width,//height:ref.style.height,//...position,//拉伸后的位置//});}}>2222</Rnd>)}exportdefaultDustBin;总结这次的功能一共用了两个东西react-dnd+react-rnd,不是必要的东西就没有写备注如果没有满足要求的话请前往官网查看!
再次感谢群友推荐的插件感谢头上有煎饺鸽鸽!原文：https://juejin.cn/post/7098594714340818952