update

src/app/football-field/football-field.component.css

@@ -76,7 +76,7 @@ canvas {
 .timeline {
   position: relative;
   width: 100%;
-  height: 40px;
+  height: 20px;
   background-color: #f0f0f0;
   border: 1px solid #ccc;
   display: flex;
@@ -85,7 +85,7 @@ canvas {
 
 .timeline-block {
   position: absolute;
-  height: 30px;
+  height: 15px;
   background-color: blue;
   border: 1px solid black;
   cursor: move;

src/app/football-field/football-field.component.html

@@ -67,10 +67,12 @@
 				<span>{{ player.id }}</span>
 				<div class="timeline" (mousedown)="onTimelineMouseDown($event, player)">
 					<div *ngFor="let step of player.timeline; let i = index"
-				     class="timeline-block"
-				     [style.left]="calculateLeftPosition(step)"
-				     [style.width]="calculateBlockWidth(step)"
-				     (mousedown)="onTimelineBlockMouseDown($event, player, i)">
+				    	class="timeline-block"
+				     	[style.left]="calculateLeftPosition(step)"
+				     	[style.width]="calculateBlockWidth(step)"
+				     	(mousedown)="onTimelineBlockMouseDown($event, player, i)"
+						(mousemove)="onMouseMove($event)"
+						(mouseup)="onMouseUp()">
 					</div>
 				</div>
 			</div>

src/app/football-field/football-field.component.ts

@@ -128,8 +128,8 @@ export class FootballFieldComponent {
 	public dragOffsetX: number = 0;
 
   	ngOnInit() {
-    		this.ctx = this.canvas.nativeElement.getContext('2d')!;
-    		this.drawField();
+    	this.ctx = this.canvas.nativeElement.getContext('2d')!;
+    	this.drawField();
 		this.createPlayers();
 		this.createPlots();
 		this.createPiquets();
@@ -298,9 +298,9 @@ export class FootballFieldComponent {
 					    destinationY: null,
 					    isMoving:false,
 					    progress: 0,
-		       			    startX: 0,
+		       			startX: 0,
 					    startY: 0,
-       					    timeline: [],
+       					timeline: [],
 					    currentStepIndex: 0 });
 		}
 		this.drawField();
@@ -324,9 +324,9 @@ export class FootballFieldComponent {
 					  destinationY: null,
 					  isMoving:false,
 					  progress: 0,
-		       			  startX: 0,
+		       		  startX: 0,
 					  startY: 0,
-       					  timeline: null,
+       				  timeline: null,
 					  currentStepIndex: 0 });
 		}
 		this.drawField();
@@ -927,6 +927,7 @@ export class FootballFieldComponent {
 
 			// Si la souris clique dans un bloc
 			if (x >= blockStartX && x <= blockEndX) {
+				console.log("clique dans un bloc !");
 				// Début du déplacement du bloc
 				this.isTimelineDragging = true;
 				this.draggedTimelinePlayer = player;
@@ -939,6 +940,7 @@ export class FootballFieldComponent {
 	}
 
 	onTimelineBlockMouseDown(event: MouseEvent, player: Circle, index: number) {
+		console.log("onTimelineBlockMouseDown");
 		this.isTimelineDragging = true;
 		this.draggedTimelinePlayer = player;
 		this.draggedTimelineIndex = index;
@@ -946,6 +948,7 @@ export class FootballFieldComponent {
 
 	onMouseMove(event: MouseEvent) {
 		if (this.isTimelineDragging && this.draggedTimelinePlayer) {
+			console.log("onMouseMove");
 			const { x } = this.getMousePos(event);
 			const totalDuration = this.getTotalTimelineDuration();
 			const newStartTime = (x / this.canvas.nativeElement.width) * totalDuration;
@@ -963,6 +966,7 @@ export class FootballFieldComponent {
 	}
 
 	onMouseUp() {
+		console.log("onMouseUp");
 		if (this.isTimelineDragging) {
 			this.isTimelineDragging = false;
 			this.draggedTimelinePlayer = null;