Заказ товаров в списке с использованием flex-порядка

Question

При попытке реализовать опцию Drag'n'Drop для списков я столкнулся с проблемой упорядочения элементов. Я хотел заказать их, просто изменив их порядок в стиле, когда вызывается событие 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>

мой Drag'n'Drop

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');
    });

  }
}

Любые советы будут оценены!