Drag & Drop в JavaScript на минмалках

Создай стиль

.selected {opacity: 0.2; border-style: solid; border-width: 2px; border-color: black ;} /* for Drag&Drop */

Например структура такая

<div id="chars">
<div class="char">1</div>
<div class="char">2</div>
<div class="char">3</div>
</div>


Запомним всех в лицо

const tasksListElement = document.querySelector(`#chars`);
const taskElements = tasksListElement.querySelectorAll(`.char`);

и вот такой портянкой у вас все и получится

for (const task of taskElements) {
task.draggable = true;
}
tasksListElement.addEventListener(`dragstart`, (evt) => {
evt.target.classList.add(`selected`)
})
tasksListElement.addEventListener(`dragend`, (evt) => {
evt.target.classList.remove(`selected`)
})
tasksListElement.addEventListener(`dragover`, (evt) => {
evt.preventDefault();
const activeElement = tasksListElement.querySelector(`.selected`);
const currentElement = evt.target;
const isMoveable = activeElement !== currentElement &&
currentElement.classList.contains(`char`);
console.log (isMoveable)
// Если нет, прерываем выполнение функции
if (!isMoveable) {
return;
}
const nextElement = (currentElement === activeElement.nextElementSibling) ?
currentElement.nextElementSibling :
currentElement;
tasksListElement.insertBefore(activeElement, nextElement);
});