React Dnd 实现横向和纵向拖拽排序

Posted 2023-03-17

参考技术A 用的东西还是 React Dnd，其实要完成 DOM 元素的排序，其实就是操作数组的排序。所以定一个数组，并且在拖拽的时候修改数组内容的位置，再由 React 渲染出来就可以了。
所以重点就在如何监听拖拽元素拖拽的位置和放置的位置。这个就要提到上一篇将 API 时提到的 useDrag 的 end(item, monitor) 和 useDrop 的 hover(item, monitor) 了。
可能有人会有疑问，为什么拖拽元素还会使用 useDrop？因为其实元素所在位置是有拖拽和放置两个行为的（并非放在容器上）。

其实这个还有个 bug，就是横向拖拽到容易边缘的时候最好能够滑动滚动条。这个后续优化。

参照 react-trello-board 可以发现它用的就是父级元素的 scrollLeft 和 scrollRight 属性。

结合 useDrop 的 hover 事件来实现具体的行为。

如此一来，横向和纵向的拖拽排序都解决了，明天可以来实现一个类似于 teambition 的看板功能了！

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;
}