主页 / user-626632

Rid's questions

Martin Hope
Rid
Asked: 2024-09-24 21:01:59 +0000 UTC
  • 6

挑战是在不影响其他元素位置的情况下对特定元素的数组进行排序。

像这样的问题。

于是就有了存储阵列。

[
    0:{ "Match": "fghfghfgh", "UUID": "a2e0b517-97d6-4050-bcd1-a0dc43a0b276" },
    1:{ "Match": "fghfghfghhhhh", "UUID": "57f03e08-9287-49ba-be4a-d59fa9c4e71c" },
    2:{ "Match": "Попадает под выборку 1", "UUID": "207036a0-48c9-4676-aa21-705a6b7d033a" },
    3:{ "Match": "asdasdasdasd", "UUID": "b448c73d-0232-4a6f-9935-7507afd3fb15" },
    4:{ "Match": "Попадает под выборку 2", "UUID": "bb9af394-0ab0-44f8-9488-a1ecbb10be75" },
    5:{ "Match": "Попадает под выборку 3", "UUID": "ef519c5c-83b8-4fb8-996b-de881a9123dd" },
    6:{ "Match": "5555", "UUID": "e089ce64-2774-49b1-ade9-ddc185bf9236" },
    7:{ "Match": "Попадает под выборку 4", "UUID": "ba789aab-2eee-4ae9-8fed-d571f76ab2fd" }
]

每个元素都有唯一的UUID值，Match选择元素（2,4,5,7）并将它们加载到DOM中

<div id="Selections">
    <div uuid="207036a0-48c9-4676-aa21-705a6b7d033a"></div>//storage[2] - 1
    <div uuid="bb9af394-0ab0-44f8-9488-a1ecbb10be75"></div>//storage[4] - 2
    <div uuid="ef519c5c-83b8-4fb8-996b-de881a9123dd"></div>//storage[5] - 3
    <div uuid="ba789aab-2eee-4ae9-8fed-d571f76ab2fd"></div>//storage[7] - 4
</div>

操作DOM（dragstart/dragover/dragend）后，它们的位置发生了变化。

<div id="Selections">
    <div uuid="207036a0-48c9-4676-aa21-705a6b7d033a"></div>// - 1
    <div uuid="ba789aab-2eee-4ae9-8fed-d571f76ab2fd"></div>// - 4
    <div uuid="bb9af394-0ab0-44f8-9488-a1ecbb10be75"></div>// - 2
    <div uuid="ef519c5c-83b8-4fb8-996b-de881a9123dd"></div>// - 3
</div>

结果，数组应如下所示：

[
    0:{ "Match": "fghfghfgh", "UUID": "a2e0b517-97d6-4050-bcd1-a0dc43a0b276" },
    1:{ "Match": "fghfghfghhhhh", "UUID": "57f03e08-9287-49ba-be4a-d59fa9c4e71c" },
    2:{ "Match": "Попадает под выборку 1", "UUID": "207036a0-48c9-4676-aa21-705a6b7d033a" },
    3:{ "Match": "asdasdasdasd", "UUID": "b448c73d-0232-4a6f-9935-7507afd3fb15" },
    4:{ "Match": "Попадает под выборку 4", "UUID": "ba789aab-2eee-4ae9-8fed-d571f76ab2fd" },
    5:{ "Match": "Попадает под выборку 2", "UUID": "bb9af394-0ab0-44f8-9488-a1ecbb10be75" },
    6:{ "Match": "5555", "UUID": "e089ce64-2774-49b1-ade9-ddc185bf9236" },
    7:{ "Match": "Попадает под выборку 3", "UUID": "ef519c5c-83b8-4fb8-996b-de881a9123dd" }
]

正如您所看到的，未包含在选择中的元素 0,1,3,6 保留在其位置，并且所选元素根据DOM中的新位置交换位置。

想到的唯一解决方案：

let uuids = Array.prototype.map.call(Selections.children, i => i.getAttribute("uuid"));// Получаем массив uuid`ов из DOM в соответствии с их положением
let storage = await Storage.getValue("Includes");// Получаем наш массив storage

let newArray = new Array(storage.length);//Создаём новый массив равный storage для сортировки
let i = 0;//Переменная соответствующая положению элемента
storage.forEach((v, k) => {//Перебираем наш массив
    if (uuids.includes(v.UUID)) {//Если элемент имеется в нашей выборке
        newArray[k] = storage.find(e => e.UUID == uuids[i]);//Ищет элемент в исходном массиве и задаёт ему новую позицию в соответствии сортировки uuids
        i++;//Переходим к следующему элементу выборки
    } else {
        newArray[k] = v;// Оставляем элемент на прежнем месте
    }
});

await Storage.setValue("Includes", newArray);//Сохраняем массив

有谁遇到过这个问题吗？

javascript