react-dnd 拖拽 九宫格
Posted Jay_帅小伙
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-dnd 拖拽 九宫格相关的知识,希望对你有一定的参考价值。
依赖版本
"react-dnd": "^5.0.0",
"react-dnd-html5-backend": "^5.0.1",
//-----------------------------------
import React, { Component } from 'react'
import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import './mydemo.css'
class Test extends Component {
dragDirection = (
dragIndex,
hoverIndex,
initialClientOffset,
clientOffset,
sourceClientOffset,
) => {
const hoverMiddleY = (initialClientOffset.y - sourceClientOffset.y) / 2;
const hoverClientY = clientOffset.y - sourceClientOffset.y;
}
render() {
const {
connectDragSource,
isDragging,
isOver,
dragRow,
moverow,
clientOffset,
sourceClientOffset,
initialClientOffset,
connectDropTarget,
...restProps
} = this.props;
const style = { ...restProps.style, cursor: 'move' };
let className = restProps.className;
// 判断向上移动还是向下移动
if (isOver && initialClientOffset) {
const direction = this.dragDirection(
dragRow.index,
restProps.index,
initialClientOffset,
clientOffset,
sourceClientOffset
);
}
return connectDragSource(
connectDropTarget(
<div {...restProps}
style={style}
className={className}
>
</div>
)
);
}
}
//---------------------------------------
const rowTarget = {
drop(props, monitor) {
console.log('rowTarget drop', props, monitor)
const dragIndex = monitor.getItem().index;
const hoverIndex = props.index;
if (dragIndex === hoverIndex) {
return;
}
props.moverow.moveRow(dragIndex, hoverIndex);
monitor.getItem().index = hoverIndex;
},
};
const rowSource = {
beginDrag(props) {
console.log('rowSource-----', props.index)
return {
index: props.index,
};
},
};
//字符串,ES6符号或返回给定组件的函数props。此放置目标仅对指定类型的 drag sources 项目做出反应
//一个普通的javascript对象,上面有一些允许的方法。它描述了放置目标如何对拖放事件做出反应
// 收集功能。它应该返回一个普通的道具对象注入你的组件。它接收两个参数:connect 和 monitor。
//可选的。一个普通的对象。
const DragDiv = DropTarget('row', rowTarget, (connect, monitor) => {
// console.log('98', connect.dropTarget())
// console.log('99',monitor.isOver())
// console.log('100',monitor.getSourceClientOffset())
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
sourceClientOffset: monitor.getSourceClientOffset(),
}
})(
DragSource('row', rowSource, (connector, monitor) => ({
connectDragSource: connector.dragSource(),
isDragging: monitor.isDragging(),
initialClientOffset: monitor.getInitialClientOffset(),
dragRow: monitor.getItem(),
clientOffset: monitor.getClientOffset(),
initialClientOffset: monitor.getInitialClientOffset(),
})
)(Test)
)
//---导出的组件--------------------------------------------
class MyDemo extends React.Component {
state = {
data: [
{
key: '1',
title: 'app1',
width: 1,
level: 1,
},
{
key: '2',
title: 'app2',
width: 1,
level: 1,
},
{
key: '3',
title: 'app3',
width: 1,
level: 1,
},
{
key: '4',
title: 'app4',
width: 1,
level: 1,
},
{
key: '5',
title: 'app5',
width: 1,
level: 1,
},
{
key: '6',
title: 'app6',
width: 1,
level: 1,
},
{
key: '7',
title: 'app7',
width: 1,
level: 1,
},
{
key: '8',
title: 'app8',
width: 1,
level: 1,
},
{
key: '9',
title: 'app9',
width: 1,
level: 1,
},
],
}
moveRow = (dragIndex, hoverIndex) => {
const { data } = this.state;
const dragRow = data[dragIndex];
this.setState(
update(this.state, {
data: {
$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
},
})
)
}
formNodes = (data) => {
return data.map((item, i) => {
return (
<DragDiv className="myitem" key={i} index={i} moverow={{ moveRow: this.moveRow }}>
{/* {this.formNodes(item.children)} */}
<div>{item.title}</div>
</DragDiv>
)
})
}
render() {
let formNodes = this.formNodes(this.state.data)
return (
<div className='wrap'>
<div className='content'>
{formNodes}
</div>
</div>
)
}
}
//创建容器
const wrapCom = DragDropContext(HTML5Backend)(MyDemo)
export default wrapCom
//---css--------------------------
.wrap{
display: flex;
justify-content: center;
background-color: #ccc;
}
.content{
background-color: pink;
width: 606px;
height: 606px;
display: flex;
flex-wrap: wrap;
}
.myitem{
border: 1px solid red;
margin: 1px;
width: 200px;
}
以上是关于react-dnd 拖拽 九宫格的主要内容,如果未能解决你的问题,请参考以下文章