Todo está explicado en esta web:

https://irradiated-watch-2d6.notion.site/CODE-Draggable-elements-239e3bbe22194482a7581d57899d3dab

y además en este video tutorial:

Lo ideal es que coloques este código en el header de toda tu web:

<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js</a>
<a href="https://code.jquery.com/ui/1.12.1/jquery-ui.js">https://code.jquery.com/ui/1.12.1/jquery-ui.js</a>
<script>
// Add this code if you want to be able to move the elements inside the container only
$(function () {
$(".draggable").draggable({
});
});
// Add this code if you want to be able to move the elements outside the container
// $(function () {
// $(".draggable").draggable();
// });
</script>

De ahí en el Personalizador colocas este código:

.draggable:hover {
cursor: move;
cursor: -moz-move;
cursor: -webkit-move;
z-index: 1;
}
.draggable:hover::after {
position: absolute;
top: 50%;
left: 50%;
content: "drag me";
backdrop-filter: blur(20px);
font-family: 'Syne', sans-serif;
padding: 1rem;
border-radius: 50px;
color: white;
}

Entonces, a todo elemento que le des la clase draggable tendrá esta posibilidad de ser seleccionado con el ratón y movido alrededor.

Me falta ver cómo hacer para que cuando pasas el ratón se coloquen los elementos uno encima de otro pero es cuestión que me vea el video entero y no a trompicones como hago siempre.

Gracias a Andrea Egli por tremendo tutorial.