I am trying to create a battleship grid and limit its containment inside the grid squares only. I don't want the draggable elements be able to be dropped outside the grid squares (disable drop on pointers).
Also, is there a way so the user can drag a ship from the list to the grid without having the ship getting instantly inside the grid after the drag starts? I want the drag to behave just like it does without the containment option but restrict it inside the grid squares only. What I really I want is the user to be able to drag the ship from the list and cross the whitespace between the list and the grid but not be able to drop the ship on the whitespace.
In addition, how can I make the ships fit inside the closest grid square range after the user ends the drag if it doesn't fit perfectly inside grid squares? I don't want the user to be able to drop a ship between two rows or doesn't fit exactly inside the grid squares.
I tried a lot of things using draggable and droppable options but I can't solve my problems.
You can see the complete project at https://github.com/canthou/battleship
I want the behavior of this application: https://www.battleshiponline.org/ during the strategy panel step.
<head>
<meta charset="utf-8">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/grid.css">
<link rel="stylesheet" href="../css/ship.css">
<link rel="stylesheet" href="../css/setup.css">
<script src="../js/ships.js" type="text/javascript"></script>
<title>Single Player</title>
</head>
<body>
<div class="setup">
<div id="setupgrid" class="grid">
<?php createGrid(); ?>
</div>
<div class="ship-list-container">
<?php deployShips(); ?>
</div>
</div>
</body>
<?php
function createGrid()
{
// Get Grid Size and Username from user
$grid_size = $_POST['grid-size'];
$username = $_POST['username'];
// Create horizontal and vertical array pointers of grid
$numbers = range(1, $grid_size);
$alphabet = range("A", "Z");
// Limit alphabet to grid size and insert letters to array
for ($i=0; $i < $grid_size; $i++) {
$letters[$i] = $alphabet[$i];
}
// Create Grid
for ($i=0; $i < $grid_size; $i++) {
// Insert numbers as horizontal pointers
if($i==0){
// Insert empty square
?>
<span class="vertical-pointers">
<span class="starting-square">
</span>
<?php
for ($k=0; $k < $grid_size; $k++) {
?>
<span class="pointers">
<?php echo $numbers[$k]; ?>
</span>
<?php
}
?><br />
</span><?php
}
?>
<span class="row" id="<?php echo $i; ?>">
<?php
for ($j=0; $j <= $grid_size; $j++) {
?>
<?php
// Insert letters as vertical pointers
if($j==0){
?>
<span class="pointers">
<?php echo $letters[$i]; ?>
</span>
<?php
}
// Insert squares
if($j>0){
?>
<span class="grid-square" id="<?php echo $letters[$i] . '-' . $j; ?>">
</span>
<?php
}
}
?></span><?php
}
}
function deployShips(){
?>
<div class="ship-title-container">
<h1 class="title">Ships</h1>
<p>
Drag and Drop to place the ships inside the board.
</p>
</div>
<div class="ships-list">
<span class="carrier ship"></span>
<span class="battleship ship"></span>
<span class="destroyer ship"></span>
<span class="submarine ship"></span>
<span class="cruiser ship"></span>
</div>
<?php
}
?>
</html>
let grid = document.getElementById('setupgrid')
let ships = document.getElementsByClassName('ship')
let squares = document.getElementsByClassName('grid-square')
$(ships).draggable({containment: grid,
revert: 'invalid'})
$(squares).each(function(){
$(this).droppable()
})
});