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

Question

我有使用notes.map()呈现的 Note 组件，每个组件都有position: static 。 使用react-draggable npm 模块可以拖动笔记。

我想要实现的功能是在删除笔记时，不影响用户拖动的笔记的位置。 我试图为已拖动的音符设置position: absolute 。 但是，这会导致音符“跳跃”一次（从流中移除时发生）。

-- 初始状态： -- 在第一次拖动尝试后，测试音符跳到其他音符的​​顶部： -- 第一次尝试后可以正常拖动：

我已经包含了 Notes.jsx 组件的相关代码：

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

对于我的 CSS 样式

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

App.jsx 如何呈现注释的相关代码：

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

非常感谢任何帮助，谢谢！

Answer 1

我不是直接解决了这个问题，而是使用不同的方法来获得我想要的结果。

总而言之，我对所有音符都使用了position: absolute ，并在边界内的随机 x,y 坐标处创建了它们。 这样删除的笔记不会影响现有笔记的位置。

希望这可以帮助任何有类似问题的人！