Как реализовать смену порядка перетаскиванием
 

Можете подсказать как реализовать смену порядка div-блоков перетаскиванием мышкой?
Я видел вроде в jQuery UA есть какая та реализация. Но это нужно две библиотеки добавлять.

А на нативном JS сложно реализовать такую задачу? Можете подкинуть идею или ссылку на то как такое организовать? Может какую простую библиотеку посоветуете или идею на реализацию.

У меня дивы примерно 200х250px горизонтально в ряд. При заполнении ряда могут становится вторым, третьим рядом. Что то у меня даже как начать JS нет идей.
Наверное нажатая кнопка мыши и следить за координатами курсора, при этом накинуть z-index на выбранный див... Но лучше спрошу, может кто даст какой совет.

Rise, спасибо! Примеры увидел, теорию по Drag'n'Drop в учебнике нашёл. Буду изучать и пробовать решить свою задачу.

Блин, что то я запутался и нахожусь в самом начале.
Если кто то сможет посмотреть и подсказать, то у меня такой макет HTML:

<style>.skates{display:flex;flex-wrap:wrap;justify-content:flex-start}.skat-size{display:flex;flex-direction:column;flex-basis:215px;margin:15px 3px 15px;padding:0 1px 1px;border:solid 1px #ccc;max-width:212px}.skat-size:hover .skat__btn{opacity:0.4}.skat-size .skat__btn:hover{opacity:1;cursor:all-scroll}.dragPanel{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18'%3E%3Cpath fill='%23010202' d='M4 5H0V1h4v4zm6-4H6v4h4V1zM4 7H0v4h4V7zm6 0H6v4h4V7zm-6 6H0v4h4v-4zm6 0H6v4h4v-4z'/%3E%3C/svg%3E");width:10px;height:18px;margin-left:5px}.skat__panel{height:21px}.skat__btn{display:inline-block;opacity:0;margin-top:3px}</style>

<div class="skates">
        
        <div class="skat-size">
            <div class="skat__panel">
                <div class="dragPanel skat__btn" title="Переместить"></div>
            </div>
            <div class="skat-params"><h4>Блок 1</h4></div>
        </div>

        <div class="skat-size">
            <div class="skat__panel">
                <div class="dragPanel skat__btn" title="Переместить"></div>
            </div>
            <div class="skat-params"><h4>Блок 2</h4></div>
        </div>

        <div class="skat-size">
            <div class="skat__panel">
                <div class="dragPanel skat__btn" title="Переместить"></div>
            </div>
            <div class="skat-params"><h4>Блок 3</h4></div>
        </div>
        
</div>

Три однотипных блока, при наведении на блок - появляется область-элемент для перетаскивания.
Эти блоки генерируются через class, поэтому события отслеживаю по event.target.
Если я правильно понял, первым делом при нажатой кнопке мыши добавляю для блока атрибут draggable="true". Получается такое начало JS:

// Перетаскивание [url]https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API[/url]
document.querySelector('.skates').addEventListener('mousedown', function(e) {
    let el = event.target;
    
    if (el.className == 'dragPanel skat__btn') {

        el.parentNode.parentNode.setAttribute('draggable', true);



        document.querySelector('.skates').addEventListener('mouseup', function (e) {
            console.log('Отпустил кнопку');
        })
    }
})

А что делать дальше? То ли собирать DataTransferItemList и создавать DataTransferItem??? - я потерялся. Может кто поможет.

Да никто нативным d&d кроме как для файлов и не пользуется, слишком мутно, криво и неудобно.)