在 React DND

问题描述

我正在使用 React-dnd，并尝试创建一个包含可排序行的表，该表只能从一个手柄拖动，这是右侧的一个小跨度。

他们在这里给出的例子 https://react-dnd.github.io/react-dnd/examples/customize/handles-and-previews

不显示任何排序。我可以使用不同的预览让句柄工作，问题是如果我使用他们提供的代码，用于对表格进行排序的放置区仅在我将其直接悬停在跨度上时才有效，而不是像它应该的那样悬停在行上。

我的代码：

 const dragRef  = useRef<any>(null)


const [{ isDragging },drag,preview] = useDrag({
    type: DragTypeEnum.ENTRY,item: () => {
        return { id: props.id,index: props.sequence }
    },collect: (monitor: any) => ({
        isDragging: monitor.isDragging(),}),});


const [{ handlerId },drop] = useDrop({
    accept: DragTypeEnum.ENTRY,collect(monitor) {
        return {
            handlerId: monitor.getHandlerId(),}
    },hover(item: DragItem,monitor: DropTargetMonitor) {
        if (!dragRef.current) {
            return
        }
        const dragId = item.id
        const hoverId = props.id;

        // Don't replace items with themselves
        if (dragId === hoverId) {
            return
        }

        // Determine rectangle on screen
        const hoverBoundingRect = dragRef.current?.getBoundingClientRect()

        // Get vertical middle
        const hoverMiddleY =
            (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2

        // Determine mouse position
        const clientOffset = monitor.getClientOffset()

        // Get pixels to the top
        const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top

        // Only perform the move when the mouse has crossed half of the items height
        // When dragging downwards,only move when the cursor is below 50%
        // When dragging upwards,only move when the cursor is above 50%

        // Dragging downwards
        if (dragId < hoverId && hoverClientY < hoverMiddleY) {
            console.log("downwards");
            return
        }

        // Dragging upwards
        if (dragId > hoverId && hoverClientY > hoverMiddleY) {
            console.log("upwards");
            return
        }

        // Time to actually perform the action
        props.moveEntry(dragId,hoverId)      //ONLY FIRING WHEN I GO OVER THE HANDLE :(

        // Note: we're mutating the monitor item here!
        // Generally it's better to avoid mutations,// but it's good here for the sake of performance
        // to avoid expensive index searches.
        item.id = hoverId
    },});


const opacity = isDragging ? 0 : 1;
drag(drop(dragRef))

表 tsx 是：

    <tr
        style={{ opacity }}
        data-handler-id={handlerId}
        ref={preview}   //THIS SHOULD BE THE PREVIEW HTML AND ALSO WHERE I CAN DRAG INTO
    >
        <td>
        //emptied for demo purpose
        </td>

        <td>
        //emptied for demo purpose
        </td>



        <td>
                    <span ref={dragRef}>                 // THIS IS MY DRAG HANDLE
                        <FontAwesomeIcon 
                            icon="bars"
                            className="pointer"
                        ></FontAwesomeIcon>
                    </span>
                </>
            }
        </td>

    </tr>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）