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

Создай стиль .selected {opacity: 0.2; border-style: solid; border-width: 2px; border-color: black ;} /* for Drag&Drop */ Например структура такая

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

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

🔘 Бесплатная Раскуртка сайта
🧮 Апдейты ИКС
🏆 История ТОП LinkFeed
🏆 История ТОП Trustlink