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

我有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最后显示）。通过“draggable”，我想更改每个img元素的优先级。例如，pic6应该在pic1之前出现。有人能为“ondragend”提供正确处理prio的逻辑建议吗？我试图根据X/Y位置进行设置，但为此，我会先拖动每个img以获得X/Y

我假设“可拖动”，您的意思是用户可以单击并拖动图片，然后它将跳转到新位置

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

如果用户单击时没有在你的图片上悬停，那么你就不在乎它，也不需要做任何事情。如果用户单击时将鼠标悬停在其中一张图片上，请检查鼠标按钮向上时用户的鼠标位置。在此基础上重新安排你的优先事项

只要获得元素的x和y坐标，就可以使用

---

希望有帮助。如果有什么不清楚的地方，请发表意见。

我不太清楚你的意思，但你可以使用

数组。排序
并根据X/Y位置对数组排序，然后使用
数组。map
根据图片所在数组的索引更改
prio
的值？好，开始时，阵列中的所有IMG都列在一个框中，我不知道如何在没有任何与“ondragX”相关的操作的情况下检测它们的X/Y坐标。如何确定COMDPONETDIMOUNT（）框中每个img元素的位置？可以基于X和Y对数组进行排序，以便对imgsThx进行重新排序以获得答案。不幸的是，我无法理解。假设我通过array.map列出div/images的列表。每个div都有onDragstart和onDragstop。共有6幅图像。让我们假设为表2x3。如果我将仅在第6个（最后一个）图像上方“鼠标悬停”，并将开始拖动到第4个图像的位置，我如何确定第4个图像的X/Y，因为我没有鼠标悬停，因此不会触发对第4个图像当前位置的检测？我假设此列表中的每个组件都将是其自己的反应组件。您可以使用array.map原型最初显示每个图像，并且可以为每个图像元素提供一个回调函数来调用组件did mount，这将告诉您来自getBoundingClientRect的数据。将其传递回父元素，然后可以比较用户发布该元素的位置与其他元素的位置。