i'm copying the exact example from the chessboardjs documentation. All images appear and the board is drawn, and pieces can be picked up, but not dropped.
Here is my code, which is virtually just example #4000 from the page. https://chessboardjs.com/examples#4000
sidetest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href=".\node_modules\@chrisoakman\chessboardjs\dist\chessboard-1.0.0.min.css">
</head>
<body>
<div id="myBoard" style="width: 400px"></div>
<button id="ruyLopezBtn">Ruy Lopez</button>
<button id="startPositionBtn">Start Position</button>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src=".\node_modules\@chrisoakman\chessboardjs\dist\chessboard-1.0.0.min.js"></script>
<script src="sidetest.js"></script>
</body>
</html>
My javascript "sidetest.js"
function onChange(oldPos, newPos) {
console.log('Position changed:')
console.log('Old position: ' + Chessboard.objToFen(oldPos))
console.log('New position: ' + Chessboard.objToFen(newPos))
console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~')
}
var config = {
draggable: true,
position: 'start',
onChange: onChange
}
var board = Chessboard('myBoard', config)
$('#ruyLopezBtn').on('click', function () {
var ruyLopez = 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R'
board.position(ruyLopez)
})
$('#startPositionBtn').on('click', board.start)
Does anyone know why everything seems to work except the last part, placing down pieces?
Solved: Needed full version of jQuery instead of slim. Answer from the comments.