第二个 Instagram 按钮的 CSS 属性

Question

Rid

Asked:2024-09-24 21:01:59 +0000 UTC2024-09-24 21:01:59 +0000 UTC 2024-09-24 21:01:59 +0000 UTC

对仅包含选定元素的数组进行排序

772

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

像这样的问题。

于是就有了存储阵列。

[
    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);//Сохраняем массив

有谁遇到过这个问题吗？

2 个回答

Voted

stylok · Answer 1 · 2024-09-24T22:31:50Z

为了简化您的生活:)让我们看看操作的顺序并在此基础上进行构建。我不会为您编写所有代码，更不用说拖放元素，但我会根据问题陈述提出理想的解决方案。

您从列表中进行选择UUIDs并将结果输入到 DOM 中，draggable您可以在其中手动更改它们的顺序。我理解正确吗？这意味着简化任务所需要做的就是不仅获取元素本身，还获取它们的索引。

看。

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

const UUIDs = ['207036a0-48c9-4676-aa21-705a6b7d033a', 'bb9af394-0ab0-44f8-9488-a1ecbb10be75', 'ef519c5c-83b8-4fb8-996b-de881a9123dd', 'ba789aab-2eee-4ae9-8fed-d571f76ab2fd'];

const selection = storage.reduce((acc, val, index) => {
  if(UUIDs.includes(val.UUID)) acc[index] = val;
  return acc    
}, {});

console.log( selection );

您可能不会相信，但几乎一切都已准备好进行简化。我们剩下的就是在 DOM（可拖动容器）中显示元素，但以data具有相同属性的形式获得一点好处index；

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

只剩下一点了 - 在drop获取dataset.index刚刚交换位置的这两个元素并storage通过解构赋值进行更改的阶段（假设它们是 4 个和 7 个元素）：

[storage[4], storage[7]] = [storage[7], storage[4]];

瞧。但是，您可能想走自己的路并一次进行多项更改...解构分配会对您有所帮助，如果您知道它们当前的索引，则可以同时交换所有四个。

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

stylok · Answer 2 · 2024-09-25T21:21:00Z

由于我们正在讨论接近现实的实现，因此这里有一个单独的评论：

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

const UUIDs = [
  '207036a0-48c9-4676-aa21-705a6b7d033a',
  'bb9af394-0ab0-44f8-9488-a1ecbb10be75',
  'ef519c5c-83b8-4fb8-996b-de881a9123dd',
  'ba789aab-2eee-4ae9-8fed-d571f76ab2fd'
];

window.addEventListener("DOMContentLoaded", () => {
  const Selections = document.getElementById("Selections");
  const selection = storage.reduce((acc, val, index) => {
    if(UUIDs.includes(val.UUID)) {
      acc[index] = val;
      let div = document.createElement("div");
      div.textContent = val.Match;
      div.dataset.index = index;
      div.setAttribute("uuid", val.UUID);
      div.setAttribute("draggable", true);
      Selections.appendChild(div);
    }
    return acc;  
  }, {});
})

function DragAndDrop(id) {
  const wrapper = document.getElementById(id);
  wrapper.addEventListener('dragstart', (e) => {
    this.root = id;
    this.target = e.target;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', e.target.outerHTML);
    e.target.style.opacity = '0.2'; 
  });
  wrapper.addEventListener('dragleave', (e) => {
    if (this.root && e.target.draggable) {
      e.target.closest('[data-index]')?.classList.remove('over'); 
    }
  });
  wrapper.addEventListener('dragover', (e) => {
    if (this.root) {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
    }
  });
  wrapper.addEventListener('dragenter', (e) => {
    if (this.root) {
      e.target.closest('[data-index]')?.classList.add('over');
    }
  });
  wrapper.addEventListener('dragend', (e) => {
    delete this.root;
    e.target.removeAttribute('style');
  });
  wrapper.addEventListener('drop', (e) => {
    if (this.root && this.target !== e.target && e.target.dataset.index) {

      // получаем текущие индексы и меняем из местами в storage
      const x = this.target.dataset.index;
      const y = e.target.dataset.index;
      [storage[x], storage[y]] = [storage[y], storage[x]];

      e.target.dataset.index = x; //+ меняем индекс у замещаемого на текущий

      e.preventDefault();
      e.target.closest('[data-index]')?.classList.remove('over'); 
      delete this.root;
      this.target.outerHTML = e.target.outerHTML;
      e.target.outerHTML = e.dataTransfer.getData('text/html');

      const current = Selections.querySelector(`[uuid="${this.target.getAttribute('uuid')}"]`);
      current.dataset.index = y; // меняем индекс у перетаскиваемого на текущий

    }
  });
}
const all = new DragAndDrop('Selections');


view.addEventListener('click', () => {
  console.clear();
  console.log('storage', storage);
}, false);

div#Selections>div[index]{
  opacity: 0.2;
}
#Selections {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#Selections div {
  background-color: green; 
  line-height: 32px;
  padding: 0 8px;
}

.over {
  border: solid 1px black;
}

<div id="Selections"></div>
<br><input type="button" id="view" value="View">

根据真实代码添加。分配中未知数量参数的方法是使用以下方法实现的new Function()：

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

const UUIDs = [
  '207036a0-48c9-4676-aa21-705a6b7d033a',
  'bb9af394-0ab0-44f8-9488-a1ecbb10be75',
  'ef519c5c-83b8-4fb8-996b-de881a9123dd',
  'ba789aab-2eee-4ae9-8fed-d571f76ab2fd'
];

window.addEventListener("DOMContentLoaded", () => {
  const selection = storage.reduce((acc, val, index) => {
    if(UUIDs.includes(val.UUID)) {
      acc[index] = val;
      let div = document.createElement("div");
      div.textContent = val.Match;
      div.dataset.index = index;
      div.setAttribute("uuid", val.UUID);
      div.setAttribute("draggable", true);
      Selections.appendChild(div);
    }
    return acc;  
  }, {});
})

const getNextElement = (cursorPosition, currentElement) => {
  const currentElementCoord = currentElement.getBoundingClientRect()
  const currentElementCenter =
    currentElementCoord.y + currentElementCoord.height / 2
  const nextElement =
    cursorPosition < currentElementCenter
      ? currentElement
      : currentElement.nextElementSibling
  return nextElement
}

let rB; // порядок элементов "До".
Selections.addEventListener("dragstart", e => {
    let currentElement = e.target;
    currentElement.setAttribute("index", Position(currentElement));
    
    // собираем текущий индекс элементов
        let range = [...Selections.querySelectorAll('[data-index]')];
        rB = range.map(b => b.dataset.index);
    // console.log('rB', rB);
    
});

Selections.addEventListener("dragend", async e => {
    let currentElement = e.target;
    let index = {}

    index.Previous = parseInt(currentElement.getAttribute("index"));
    index.Current = Position(currentElement);
    currentElement.removeAttribute("index");

    if (index.Previous === index.Current) return;
    
    // rA порядок элементов "После".
    let range = [...Selections.querySelectorAll('[data-index]')];
        const rA = range.map(b => b.dataset.index);
    // console.log('rA', rA);
   
    const assignmentString = '['+rB.map(b => `storage[${b}]`)+']=['+rA.map(b => `storage[${b}]`)+']';
        const destructuringAssignment = new Function(assignmentString);
        destructuringAssignment();
        range.map((el,i) => el.dataset.index = rA[i]); // переиндексировать на текущие цифры
        console.log('storage', storage);

});

function Position(element) {
    return Array.prototype.indexOf.call(Selections.children, element);
}

Selections.addEventListener("dragover", async e => {
    e.preventDefault();
    const activeElement = Selections.querySelector("div[index]");//Selections.querySelector(`.selected`);
    let currentElement = e.target;
    if (currentElement?.parentElement?.parentElement == Selections) currentElement = currentElement.parentElement;
    //console.log(activeElement, currentElement);
    const isMoveable = activeElement !== currentElement;
    if (!isMoveable) return;
    const nextElement = getNextElement(e.clientY, currentElement);

    if (nextElement && activeElement === nextElement.previousElementSibling || activeElement === nextElement) return;

    Selections.insertBefore(activeElement, nextElement);
    //console.log(activeElement, nextElement);
});

div#Selections>div[index] {
    opacity: 0.2;
}
#Selections {
  background-color: green
}

<div id="Selections"></div>

对仅包含选定元素的数组进行排序

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

对仅包含选定元素的数组进行排序

2 个回答

相关问题