JavaScript - quiero programar algo similar a esto

Buenas, hace poco conocí un página web donde hay una aplicación para hacer formaciones de equipos de futbol, me gustó mucho la idea y quiero replicarla ya que la pagina ha quedado desactualizada por lo que se ve.
La página es: https://chosen11.com/
Tengo entendido que la pagina fue diseñada usando javascript, entonces: como puedo hacer una página similar? hace un tiempo deje la programación pero aun creo poder desarrollarlo, algún consejo de como empezar este proyecto?

Hay bastantes opciones de como afrontar esto y muchas formas de hacerlo. Empieza investigando sobre API's con esto puedes aprender a tener una base de datos de las plantillas de los equipos actualizados o talvez copiando los datos de otros sitios web.

Después ya puedes mirar el Javascript necesario para poder arrastrar o mover objetos en el DOM, exactamente como lo hace la dicha pagina para poder mover los jugadores por el campo. Toda la parte estilizada y bonita es con CSS.

Cualquier cosa avisas

Muchas gracias, hoy empezare a investigar esos temas y si tengo un consulta estaré escribiendo por aquí.

Bueno ya he empezado con este proyecto y la verdad nunca antes había trabajado con java script pero igual intentare ir avanzando y aprendiendo, he creado un repositorio en GitHub para este proyecto para recibir ayuda y sugerencias sobre el código e interfaz gráfica, Me he saltado varios pasos en el proceso de elaboración pero ya lo iré corrigiendo.

Estuve analizando el código de la página web chosen11.com, que es la que estoy considerando como referente, (dejaré una captura en scroll que le tome a su estructura). Sobre este punto, mi duda es que vi abundante código en varias de las páginas y lo que quería saber es si ese código y esos archivos fueron escritos o importados, y si es realmente necesario escribir todo ese código o tal vez el creador de esa página uso un software que le implementa automáticamente algunos bloques de código.

Si alguien revisa el proyecto en mi repositorio vera que todos los jugadores empiezan en la esquina superior izquierda y desde allí puedo desplazarlos sin problemas pero cómo podría hacer que empiecen en un punto determinado, por ejemplo para formaciones 4-3-3 o 3-5-2, también quisiera saber cómo puedo hacer que se mantengan dentro del contenedor.

Repositorio:
https://github.com/marcodiazpa/py_fcb

Avance del proyecto:


++++++++++++++++++++++++++++++++++++++++++++
Estructura de chosen11:

Esa pagina usa Vue.js (framework de js) y boostrap (libreria para css) que ayudan al diseño y desarrollo de las paginas, aparte de eso usan JQuery.js (otra librería de js) que ayuda en la manipulación del DOM. Tu proyecto tendrá tanto código como sea necesario, no te preocupes por eso.

Para que puedas implementar las posiciones predeterminadas necesitas definir la ubicación de cada jugador en el campo (ejes X y Y), Chosen11 lo que hace es tener almacenado todos esos datos previamente en un archivo JSON y le da una posición en X y Y a cada jugador, con eso cuando carga la pagina cada elemento se posiciona de acuerdo a esos datos.

Para que cada elemento se mantenga dentro del campo debes hacer lo siguiente:

Investiga sobre JQuery y también sobre objectos JSON eso te ayudara mucho. Cualquier cosa pregunta sin pena, estamos para ayudarnos.

Hola estos dias estuve aprendiendo vue, pero ayer tuve un problema con el compilador, te comento que hice la instalación de node.js en su versión LTS (ya que es requerido para instalar vue) luego instalé vue via npm desde el cmd y todo fue perfecto incluso cree 3 proyectos de práctica los cuales los estuve probando desde vsc y su ejecución en el navegador web, unas horas todo iba perfecto pero al día siguiente comencé a tener problemas de compilación, exactamente me salta un ventana por encima del dom del navegador que me muestra el mismo mensaje de error de la consola de vsc diciendo que la variables fueron declaradas pero no están siendo usadas (detectado por eslint), en el inspector del navegador me aparece <no_scrip></no_script> en el body y más abajo un mensaje relacionado a problemas de webpack, estuve buscando información y al parecer hay problemas con webpack por conflicto entre las versiones nuevas, puedo seguir trabajando pero es un problema no poder ver el resultado de mi código en el inspector para ir corrigiendo errores de sintaxis y demás, si no tengo de otra me tocara instalar por yarn, quería trabajar de la forma clásica pero parece que para usuarios novatos no es fácil dar una solución a esto, que la solución pasa por un tema de configuración, si encuentras alguna solución me avisas mientras estaré practicando sin inspector.

Aunque sea mas demorado hacer este proyecto en puro JS (vanilla) te lo recomiendo. No se si ya te has familiarizado con Vue y crees que puedes implementarlo...pues adelante. Pero en definitiva se puede lograr en puro JS y CSS...... Lo que tenias hasta el momento que mostraste mas arriba estaba bien, ya solamente era ajustar unas cosas y listo. mi opinión. Sin embargo, suerte

Hola de nuevo y gracias por tu respuesta, no he continuado con el proyecto porque me puse a llevar un curso, donde estoy aprendiendo Vue.js y algo de bootstrap, antes mencionaste jQuery, aunque no me queda claro, por qué teniendo Vue.js tendrían necesidad de usar jQuery para manipulación del DOM?, y solo deduzco que es porque usan jQuery para importar una parte de la lógica y solo usan Vue.js como una interfaz y manejo más fluido del código, o la otra opción sería: que buscando optimizar la App, han migrado a Vue.js el código que alguna vez fue escrito todo en jQuery.
Quiero saber qué piensas al respecto?, ya que pretendo replicar perfectamente esta aplicación con fines educativos y luego de eso, voy a implementar algunos usos y mejoras para montarlo en un proyecto real.
Espero tu respuesta mientras tanto iré implementando el código que ya tenía a un proyecto de cero en Vue.js, gracias.

Yo te decía que investigaras sobe Jquery porque es facil de implementar y hubieras podido completar todo el proyecto simplemente con esa libreria. Pero ahora que estas aprendiendo Vue continua con eso, un framework es mucho mas rápido, tiene muchas mas ventajas y es fácilmente sostenible en aplicaciones de gran tamaño y lo mejor es que genera un codigo mas limpio y mas facil de mantener en el futuro.

Saludos