（已解决）从流中移除 Draggable React 组件而不跳转的最佳方法？

Question

I have Note components that are rendered using notes.map() , each with position: static . The notes are draggable using react-draggable npm module.

The functionality I'm trying to achieve is when a note is deleted, to not affect the position of notes that have been dragged by the user. I've attempted to set position: absolute for notes that have been dragged. However, this causes the note to 'jump' in position once (happens when removed from flow).

-- Initial State: -- After first drag attempt, test note jumps on top of other note: -- Able to drag normally after first attempt:

I've included relevant code for Notes.jsx component:

function Note(props) {
const [dragDisabled, setDragDisabled] = useState(true);
const [beenDragged, setBeenDragged] = useState(props.beenDragged);
const [position, setPosition] = useState({ xPos: props.xPos, yPos: props.yPos });

// Drag Note Functions
function handleClick() {
    setDragDisabled(prevValue => {
        return !prevValue;
    })
}

function firstDrag(event) {
    if (!beenDragged) {
        axios.post("api/note/beenDragged", {id: props.id})
            .then(setBeenDragged(true));
    }
}

function finishDrag(event, data) {
    setPosition({ xPos: data.x, yPos: data.y });
    
}

useEffect(() => {
    axios.post("/api/note/updateposition", {position, id: props.id });
}, [position]);

return <Draggable
    disabled={dragDisabled}
    onStart={firstDrag}
    onStop={finishDrag}
    defaultPosition={{ x: props.xPos, y: props.yPos }}
    // position={location}
>
    <div className='note' style={{position: beenDragged ? 'absolute' : 'static'}}>

        <h1>{props.title}</h1>
        <p>{props.content}</p>

        <button onClick={handleClick}>
            {dragDisabled ? <LockIcon /> : <LockOpenIcon />}
        </button>
        <EditPopup title={props.title} content={props.content} editNote={editNote} />
        <DeletePopup deleteNote={deleteNote} />

    </div>
</Draggable>
}

and for my CSS styling

.note {
background: #fff;
/* background-image: url("https://www.transparenttextures.com/patterns/notebook-dark.png"); */
background-image: url("https://www.transparenttextures.com/patterns/lined-paper-2.png");
border-radius: 7px;
box-shadow: 0 2px 5px rgb(120, 150, 179);
padding: 10px;
width: 240px;
margin: 16px;
float: left;
}

Relevant code for how App.jsx renders the notes:

function App() {
const [notes, setNotes] = useState([]);

return (
    <div id="bootstrap-override">
        {notes.map((note) => {
            return <Note
                key={note._id}
                id={note._id}
                title={note.title}
                content={note.content}
                xPos={note.xPos}
                yPos={note.yPos}
                beenDragged={note.beenDragged}
                deleteNote={deleteNote}
                editNote={editNote}
            />
        })}
    </div>);
}

Any help is much appreciated, thank you!

Answer 1

I solved the issue not directly, but rather using a different approach to get the result I was looking for.

To summarize, I used position: absolute for all notes, and created them at random x,y coordinates within a boundary. This way deleted notes would not affect the position of existing notes.

Hope this helps anyone with similar issues!