React - 通过拖动更改 img 元素的顺序

Posted 2023-02-22

【中文标题】React - 通过拖动更改 img 元素的顺序

【英文标题】：React - change order of img element by dragging

【发布时间】：2020-03-27 02:58:54

【问题描述】：

我有 JSON，它定义了一组图片。

pictures[picutreName:"pic1", prio:1,
         picutreName:"pic2", prio:2,
         picutreName:"pic3", prio:3,
         picutreName:"pic4", prio:4,
         picutreName:"pic5", prio:5,
         picutreName:"pic6", prio:6
        ]

图中按照“prio”排序（prio:1最先显示，prio:6最后显示）。通过“可拖动”，我想更改每个 img 元素的 prio 。例如 pic6 应该出现在 pic1 之前。有人可以建议正确处理prio的“ondragend”逻辑吗？我试图根据 X/Y 位置进行设置，但为此我会先拖动每个 img 以获取 X/Y

【问题讨论】：

我不太确定你的意思，但你可以使用 array.sort 并根据 X/Y 位置对数组进行排序，然后使用 array.map 更改基于 prio 的值图片位于数组的索引上？

好的，一开始数组中的所有imgs都列在一个框中，我不知道如何在没有任何与“ondragX”相关的操作的情况下检测它们的X/Y坐标。如何确定 comdponentDidMount() 框中每个 img 元素的位置？该数组可以比基于 X 和 Y 的 sortex 来重新排序 imgs

【参考方案1】：

我假设“可拖动”是指用户可以单击并拖动图片，它会跳转到新位置？

您需要查看事件侦听器——特别是 onMouseDown-- 和 MouseEvent clientX/Y 事件。我知道的“最简单”的方法是使用onMouseEnter and onMouseLeave 事件。每当用户将鼠标悬停在您的一个 div 上时，触发一个函数，将其优先级/x 和 y 位置存储在状态中。当他们退出 div 时，从您的状态中删除存储的信息。然后，当您检测到用户按下鼠标按钮时，请检查您是否在状态中具有优先级。

如果用户在点击时没有将鼠标悬停在您的一张图片上，那么您就不会关心它，也无需执行任何操作。如果用户在单击时将鼠标悬停在其中一张图片上，则检查用户的鼠标在鼠标按钮上的位置。在此基础上重新排序您的优先级。

就获取元素的 x 和 y 坐标而言，您可以使用 Element.getBoundingClientRect()

希望对您有所帮助。如果有什么不清楚的地方请评论。

【讨论】：

谢谢你的答案。不幸的是，我无法理解。假设我通过 div / 图像的 array.map 列表列出。每个 div 都有 onDragstart、onDragstop。有6张图片。让我们想象一下桌子 2x3。如果我将“鼠标悬停”仅在第 6 个（最后一个）图像上方并开始拖动到第 4 个图像的位置，我如何确定第 4 个图像的 X/Y，因为我没有鼠标悬停，所以检测到第 4 个的当前位置不是触发了吗？

我假设这个列表中的每个组件都是它自己的反应组件。您可以使用 array.map 原型来初始显示每个图像，并且您可以给每个图像元素一个回调函数来调用组件确实挂载，它会告诉您来自 getBoundingClientRect 的数据。将其传递回您的父元素，然后您可以将用户释放该元素的位置与您的其他元素的位置进行比较。