Перетаскивание Div блока на странице

Для того что бы сделать блок перетаскиваемым на странице, надо добавить следующий код

Добавим стили:
<style>
.draggable {
width: 200px;
position: absolute;
cursor: move;
padding: 10px;
user-select: none; /* Отключение выделение текста */
border: none; /* Убирание рамки */
background-color: transparent; /* Прозрачный фон */
}
</style>

Вставим js скрипт:
<script>
document.addEventListener('DOMContentLoaded', () => {
const dragElement = document.getElementById('draggable');

dragElement.addEventListener('mousedown', (e) => {
e.preventDefault(); // Отключаем выделение текста

let shiftX = e.clientX - dragElement.getBoundingClientRect().left;
let shiftY = e.clientY - dragElement.getBoundingClientRect().top;

function moveAt(pageX, pageY) {
dragElement.style.left = pageX - shiftX + 'px';
dragElement.style.top = pageY - shiftY + 'px';
}

function onMouseMove(e) {
moveAt(e.pageX, e.pageY);
}

document.addEventListener('mousemove', onMouseMove);

document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', onMouseMove);
}, { once: true });
});

dragElement.ondragstart = () => false;
});
</script>

И теперь упакуем наш контент в div блок:
<div id="draggable" class="draggable">
контент
</div>