Question

我已经在寻找类似的问题，但是关于React Dnd的帖子并不多。所以，我来这里看看是否有人可以帮助我。

我是React的新手，尤其是React Dnd的新手，我遵循了本教程https://react-dnd.github.io/react-dnd/docs/tutorial#creating-the-components。

我想做什么： 将按钮拖放到一个简单的板上，就像上面的教程中的板一样。

我的问题是： 我的按钮可以移动并处于“ isDrag”状态，如果我将他放到一个正方形上（如果需要，可以选择这种情况），他的位置在代码中已更改（例如，从[0，0]更改为[1，2]），这是好事。但是，如果您在导航器中查看页面，则什么也没有发生，该按钮将停留在同一方块中！

这是我的代码：

Machine.jsx：

import React, { Component } from 'react';
import ImageMachine from './ImageMachine';
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import ButtonDnd from './ButtonDnd';
import './index.css';

export class Machine extends Component {
    static displayName = Machine.name;

    render() {
        return (
            <>
                <DndProvider backend={HTML5Backend}>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <button type="button" class="btn btn-success">Add a new link</button>
                            </div>
                            <div class="col">
                                <h3 align="center">Test Machine</h3>
                            </div>
                            <div id="foobutton" class="col">
                                <ButtonDnd />
                            </div>
                        </div>
                    </div>
                    <br />
                    <ImageMachine />
                </DndProvider>
            </>
        );
    }
}

ImageMachine.jsx：

import React from 'react';
import Board from './Board';
import './index.css';

var position;
var posStr = "";

export function moveBtn(toX, toY) {
    position = [toX, toY];
    posStr = position.toString();
}

export default function ImageMachine() {
    if (position == null)
        position = [0, 0];

    posStr = position.toString();

    return (
        <>
            {posStr}
            <div className="bg">
                <Board position={position}/>
            </div>
            <br />
        </>
    )
}

Board.jsx：

import React from 'react'
import ButtonDnd from './ButtonDnd'
import DropSquare from './DropSquare';

function renderSquare(i, position) {
    const x = i % 8
    const y = Math.floor(i / 8)

    return (
        <div key={i} style={{ width: '12.5%', height: '12.5%' }}>
            <DropSquare x={x} y={y}>
                {renderBtn(x, y, position)}
            </DropSquare>
        </div>
    )
}

function renderBtn(x, y, [posX, posY]) {
    if (x === posX && y === posY) {
        return <ButtonDnd />
    }
}

export default function Board({ position }) {
    const squares = []
    for (let i = 0; i < 16; i++) {
        squares.push(renderSquare(i, position))
    }

    return (
        <div
            style={{
                width: '100%',
                height: '100%',
                display: 'flex',
                flexWrap: 'wrap'
            }}
        >
            {squares}
        </div>
    )
}

DropSquare.jsx：

import React from 'react';
import { ItemTypes } from './Constant'
import { useDrop } from 'react-dnd'
import { moveBtn } from './ImageMachine'
import Square from './Square';
import './index.css';

export default function DropSquare({ x, y, children }) {
    const [{ isOver }, drop] = useDrop({
        accept: ItemTypes.BUTTONDND,
        drop: () => moveBtn(x, y),
        collect: monitor => ({
            isOver: !!monitor.isOver()
        })
    })

    return (
        <div
            ref={drop}
            style={{
                position: 'relative',
                width: '100%',
                height: '100%'
            }}
        >
            <Square>{children}</Square>
            {isOver && (
                <div
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        height: '100%',
                        width: '100%',
                        zIndex: 1,
                        opacity: 0.5,
                        backgroundColor: 'yellow'
                    }}
                />
            )}
        </div>
    )
}

ButtonDnd.jsx：

import React from 'react';
import { ItemTypes } from './Constant'
import { useDrag } from 'react-dnd'

function ButtonDnd() {
    const [{ isDragging }, drag] = useDrag({
        item: { type: ItemTypes.BUTTONDND },
        collect: monitor => ({
            isDragging: !!monitor.isDragging(),
        }),
    })

    return (
        <>
            <div
                ref={drag}
                style={{
                    opacity: isDragging ? 0.5 : 1,
                    cursor: 'move',
                }}
            >
                <button type="button" class="btn btn-success">New button dragable</button>
            </div>
        </>
    );
}

export default ButtonDnd

这是我关于StackOverflow的第一篇文章，请随时告诉我我做错了什么，谢谢。

使用React DND拖动项目不要移动到他的放置目标

0 个答案: