反应中的拖放功能
drag and drop feature in react
我正在使用 React。我必须制作可拖动的文本字段,它也可以调整大小和编辑。我通过使用可拖动库并用可拖动组件围绕我的文本字段来完成此操作。因此,用户可以将此文本字段移动到屏幕上的任何位置,并且可以对其进行编辑。这类似于我们在ppts上写文字的方式。
现在我还想将文本字段在屏幕上的这个位置保存在数据库中,这样当用户再次返回网页时,文本字段会显示在其之前的位置以及输入的详细信息。我虽然使用 x 和 y 坐标,但它会随着屏幕尺寸而变化,所以我认为它效率不高。
他们还有其他方式吗,比如存储 DOM,或者 powerpoints 使用什么概念来做到这一点?我使用 mongodb 作为数据库,使用 nodejs 作为后端语言。
稍后,我想添加其他功能,例如拖放图像组件,以便用户可以将图像放入其中,添加拖放按钮。任何想法将不胜感激。
该问题的一个可能解决方案是存储相对于基本尺寸的 x 和 y 坐标,例如1920x1080,然后计算相对于您已经设置的基本尺寸应该显示哪些 x 和 y 坐标。
例如
let x = viewportWidth / baseWidth * dbX;
let y = viewportHeight / baseHeight * dbY;
我正在使用 React。我必须制作可拖动的文本字段,它也可以调整大小和编辑。我通过使用可拖动库并用可拖动组件围绕我的文本字段来完成此操作。因此,用户可以将此文本字段移动到屏幕上的任何位置,并且可以对其进行编辑。这类似于我们在ppts上写文字的方式。
现在我还想将文本字段在屏幕上的这个位置保存在数据库中,这样当用户再次返回网页时,文本字段会显示在其之前的位置以及输入的详细信息。我虽然使用 x 和 y 坐标,但它会随着屏幕尺寸而变化,所以我认为它效率不高。
他们还有其他方式吗,比如存储 DOM,或者 powerpoints 使用什么概念来做到这一点?我使用 mongodb 作为数据库,使用 nodejs 作为后端语言。
稍后,我想添加其他功能,例如拖放图像组件,以便用户可以将图像放入其中,添加拖放按钮。任何想法将不胜感激。
该问题的一个可能解决方案是存储相对于基本尺寸的 x 和 y 坐标,例如1920x1080,然后计算相对于您已经设置的基本尺寸应该显示哪些 x 和 y 坐标。
例如
let x = viewportWidth / baseWidth * dbX;
let y = viewportHeight / baseHeight * dbY;