使用弹性订单对列表中的商品进行订购

Question

尝试为列表实现“拖放”选项我遇到了订购商品的问题。 我只想命令他们在调用dragover事件时更改样式的顺序，但是由于某些原因，它对我不起作用。

在列表中更改顺序的好方法是什么？

这是到目前为止我得到的代码：

HTML

<div class="wrapper">
  <header>
    <h1>Drag and Drop</h1>
  </header>

  <div class="lists">

    <div class="list">
      <div class="item" draggable="true" style="order: 1 !important;" data-order="1">Draggable item 1</div>
      <div class="item" draggable="true" style="order: 2 !important;" data-order="2">Draggable item 2</div>
      <div class="item" draggable="true" style="order: 3 !important;" data-order="3">Draggable item 3</div>
    </div>

    <div class="list"></div>    
    <div class="list"></div>

  </div>
</div>

我的拖放

const lists = document.querySelectorAll('.list');
const items = document.querySelectorAll('.item');

let draggedItem = null;
let hoveredItem = null;

let placeholderEl: HTMLElement | null = null;
let placeholderOrder: number | null = null; 
let hoveredOrder: number | null = null; 



function getPlaceholder(el: HTMLElement): HTMLElement {

  const placeholder = document.createElement('div');

  const params = {
    width: window.getComputedStyle(el).width,
    height: window.getComputedStyle(el).height,
  }

  placeholder.style.cssText = `
    width: ${params.width};
    height: ${params.height};
    border: 1px dotted #bc263c;
  `;

  placeholder.dataset.placeholder = 'true';
  placeholder.dataset.order = el.dataset.order;
  placeholder.style.order = placeholder.dataset.order;

  if (placeholderEl === null) {
    placeholderEl = placeholder;
  } 

  return placeholder;

}

for (let i = 0; i < items.length; i++){
  const item = items[i];

  item.addEventListener('dragstart', () => {
    draggedItem = item;

    const placeholder = getPlaceholder(draggedItem);
    const list = draggedItem.parentElement;

    setTimeout(() => {
      const el = getPlaceholder(draggedItem);
      draggedItem.style.display = 'none';

      list.append(el);
    }, 0);

  });

  item.addEventListener('dragend', () => {

    setTimeout(() => {
      const placeholder = document.querySelector('div[data-placeholder="true"]');
      draggedItem.style.display = 'block';

      placeholder.remove();

      draggedItem = null;
    }, 0);

  });


  for (let j = 0; j < lists.length; j++) {
    const list = lists[j];

    list.addEventListener('dragover', (e: DragEvent) => {
      hoveredItem = e.target;
      hoveredOrder = hoveredItem.dataset.order;


      if (hoveredItem.style.order && hoveredItem.style.order !== draggedItem.style.order) {
        placeholderEl.dataset.order = `${hoveredItem.dataset.order}`;
        // placeholderEl.style.order = placeholderEl.dataset.order + ' !important';
        placeholderEl.style.order = placeholderEl.dataset.order;

      }


      e.preventDefault();
    });

    list.addEventListener('dragenter', (e) => {
      e.preventDefault();
      list.classList.toggle('active-hover-list');
    });

    list.addEventListener('dragleave', () => {
      list.classList.toggle('active-hover-list');
    });

    list.addEventListener('drop', () => {
      list.append(draggedItem);
      list.classList.toggle('active-hover-list');
    });

  }
}

任何提示将不胜感激！