Easy Football Lineup Selection with jQuery UI Drag Drop
Football, also known as soccer in some parts of the world, is a sport played between two teams of eleven players each. The game is played on a rectangular field, typically grass, turf, or artificial turf, with goals at each end.
Each team consists of eleven players, including a goalkeeper in football. Players are usually divided into positions such as defenders, midfielders, and forwards, each with specific roles and responsibilities on the field for a football match.
Follow this video for complete guidance :
Full Source Code for Football Lineup
Click Here to Download Photos Used
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Football</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style type="text/css">
body{
background: #2c86d0;
}
figure{
margin-bottom:5px;
}
.player img{
width:100%;
}
.player-wrapper {
width: 80%;
z-index: 55;
top: 40px;
left: 10%;
}
.player {
width: 150px;
}
.player:hover{
opacity:0.75;
}
.player-name{
font-size: 1.3rem;
color: #fff;
}
.player figure {
margin-bottom: 0.5em;
}
.player-row-wrap {
width: 100%;
background: rgba(76, 228, 119, 0.6);
height: 90vh;
overflow-y: scroll;
border-left: 2px solid #dddddd;
}
.h-90{
height:90vh;
margin-top:5vh;
overflow: auto;
}
.ground {
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
position: relative;
}
.box{
padding: 4px;
margin-bottom: 20px;
text-align: center;
}
</style>
</head>
<?php
$players = array(
'Scott Carson',
'Ederson',
'Stefan Ortega Moreno',
'Manuel Akanji',
'Nathan Ake',
'Joao Cancelo',
'Ruben Dias',
'Sergio Gomez',
'Josko Gvardiol',
'Rico Lewis',
'John Stones',
'Kyle Walker',
'Joshua Wilson Esbrand',
'Oscar Bobb',
'Kevin De Bruyne',
'Jeremy Doku',
'Phil Foden',
'Jack Grealish',
'Mateo Kovacic',
'James McAtee',
'Matheus Nunes',
'Maximo Perrone',
'Kalvin Philips',
'Rodrigo',
'Bernardo Silva',
'Julian Alvarez',
'Erling Haaland'
);
?>
<body>
<main>
<div class="container p-0">
<div class="row">
<div class="col-lg-8">
<div class="ground h-90">
<img src="ground.svg" alt="">
<div class="player-wrapper position-absolute">
<div class="row row1 pt-2 text-center justify-content-center">
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
</div>
<div class="row row2 pt-2 text-center justify-content-between mt-lg-4">
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
</div>
<!-- row-3 -->
<div class="row row3 pt-2 text-center justify-content-between mt-lg-4">
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
</div>
<!-- row-3 -->
<div class="row row3 pt-2 text-center justify-content-around mt-lg-4">
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
<div class="player">
<figure class="position-relative d-inline-block">
<img src="player.png">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row player-row h-90">
<?php foreach($players as $player){?>
<?php $photo = strtolower(str_replace(' ','-',$player));?>
<div class="col-4">
<div class="box draggable">
<figure class="position-relative">
<img class="w-100" src="players/<?php echo $photo;?>.webp">
</figure>
<div class="player-name">
<?php
$player = explode(' ',$player);
echo $player[count($player)-1];
?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
$('.draggable').draggable({
helper : 'clone',
revert : 'invalid',
start : function(event, ui){
$(ui.helper).css('width', `${ $(event.target).width() }px`);
}
});
$( ".player" ).droppable({
drop: function( event, ui ) {
image = $(ui.draggable).find('img').attr('src');
player_name = $(ui.draggable).find('.player-name').html();
$(this).find('img').attr('src',image);
$(this).find('.playing-name').html(player_name);
}
});
</script>
</body>
</html>
Lineup Selection
Selecting a football lineup can depend on various factors such as the formation you want to play, the strengths and weaknesses of your team and the opposition, as well as any specific tactical considerations you might have.
Here’s a general aspect that play role in lineup selection:
Formation: Decide on the formation you want to use based on your team’s strengths and the style of play you want to implement. Common formations include 4-4-2, 4-3-3, 3-5-2, etc.
Goalkeeper: Choose your goalkeeper based on their skill, form, and experience. The goalkeeper is a crucial position, so choose someone reliable and confident.
Defenders: Select defenders who are strong in defense, good at marking, and capable of contributing to the attack if needed. Consider factors like pace, aerial ability, and defensive positioning.
Midfielders: Choose midfielders who can control the game, dictate the tempo, and provide defensive cover when necessary. Include players who are creative and can link defense with attack effectively.
Forwards: Select forwards who are capable of scoring goals and creating opportunities for others. Consider their pace, movement, and ability to hold up play or play off the shoulder of the last defender.
Substitutes: Have a strong bench with players who can make an impact when called upon. Consider players who can cover multiple positions and bring different qualities to the team.
Opponent Analysis: Consider the strengths and weaknesses of the opposition when selecting your lineup. Adjust your lineup and tactics accordingly to exploit their weaknesses and neutralize their strengths.
Fitness and Form: Take into account the fitness and form of your players. Select players who are in good condition and performing well in training and recent matches.
Tactical Considerations: Consider any specific tactical instructions or game plan you want to implement. Select players who can execute these tactics effectively.
Balance: Aim for a balanced lineup with a mix of defensive solidity, creativity, and attacking threat. Ensure that each area of the pitch is covered adequately.
