Cómo crear un creador de equipos de fútbol con drag and drop usando Bootstrap 4

Hola muy buenas a tod@s. Lo primero de todo pido disculpas, me parece que el tema puede que no tenga que ir aquí, si es así, moverlo a su correspondiente subforo porfavor.

Os explico un poco lo que quiero hacer.

Tengo una imagen digamos de un campo de fútbol, y tengo jugadores. Me gustaría poder ofrecer al usuario la posibilidad de realizar su propio equipo de una forma intuitiva. Había pensado en intentar hacer un drag and drop pero no se como lo podría hacer ya que en un <div>tengo la imagen</div> Estoy utilizando Bootstrap 4.

Intentar hacer algo así:



Muchas gracias.

Tienes la imagen del campo en un <img/> ? Creo que podrías hacer lo del drag and drop si pones la imagen de fondo con css 🙂

LuisPariona dijo:

Tienes la imagen del campo en un <img/> ? Creo que podrías hacer lo del drag and drop si pones la imagen de fondo con css 🙂

Hacer clic para expandir...

Exactamente.
Justo hace unos meses hicimos un estilo parecido pero era un auditorio para conciertos. el siguiente tutorial me ayudó bastante https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/