如何在 React 中拖放到容器内？

Question

我正在尝试拖放在父组件的

div

元素内呈现的卡片组件。这些卡片只允许在这个

div

容器内拖动，并且只能在某些特定位置拖动。

我已经尝试使用 onDragStart、onDrag 和 onDragEnd 函数来执行此操作，并且我可以设法在网络上拖动组件。问题是我不知道如何将被拖动的组件配置为仅在

div

容器内且仅在特定位置拖动。

这里是我的父组件的一个例子，其中渲染了可拖动的卡片：

import React, { useState } from 'react';
import './index.css';
import ExperienceCards from '../ExperienceCards';
import experienceData from '../../Data/experienceData';

const Home = () => {

    const experienceCards = experienceData.map((card, i) => 
        <div key={i} className="mt-3 d-flex justify-content-between">
            {/* <p className="card-index">{i + 1}</p> */}
            <div className="w-90">
                <ExperienceCards 
                    title={card.title} 
                    text={card.text} 
                    time={card.time} 
                    showIcon={card.showIcon} 
                />
            </div>
        </div>
    );


    return (
        <div className="container-fluid">
            <div className="row justify-content-center">
                <div className="col-md-2 aside-bg pt-3 pb-3">
                    <div className="aside-container">
                        <h3 className="aside-title">Experiencias</h3>   
                        <Button icon={ <AddIcon /> } />
                    </div>
                    <div>
                        {experienceCards}
                    </div>
                </div>
               
      //SOME OTHER COMPONENTS

            </div>
        </div>
    );
}

export default Home;

这是可拖动卡片的示例：

import React, { useState } from 'react';
import './index.css';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import Select from '../Select';

const ExperienceCards = ({ title, text, time, showIcon }) => {
    const [x, setX] = useState(0);
    const [y, setY] = useState(0);

    const handleDragStart = (event) =>{
        console.log("Started")
    }

    const handleDrag = (event) =>{
        console.log("Dragging...")
    }

    const handleDragEnd = (event) =>{
        setX(event.clientX);
        setY(event.clientY);
    }   

    return(
        <div 
            draggable
            onDragStart={handleDragStart}
            onDrag={handleDrag}
            onDragEnd={handleDragEnd}
            style={{
                position: "absolute",
                left: x,
                top: y
            }}
            className="card-container p-3"
        >
            <div className="d-flex justify-content-between mb-1">
                <h6 className="card-title w-75">{title}</h6>
                {showIcon && <MoreVertIcon />}
            </div>
            <p className="card-text color-muted mt-2">{text}</p>
            <div className="d-flex justify-content-between align-items-baseline mt-3">
                <p className="card-time color-muted">{time}</p>
                <Select />
            </div>
        </div>
    );
}

export default ExperienceCards;

有什么办法吗？

我尝试设置更改

div

容器的样式以定位相对但它没有用。

这是我的网页图片：

Answer 1

请使用react js的npm包。 链接在这里。 https://www.npmjs.com/package/react-draggable