0

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?

4
  • 1
    try including the full version of jQuery instead of the full version Jun 9, 2021 at 17:47
  • Thank you!!! How did you know this haha. tysm
    – chron1cle
    Jun 9, 2021 at 19:06
  • Actually I've never even used ChessBoardJS in my entire life. but the fact that it was working on the site and not for you, was some mistake in the inclusion. this happened with me all the time, when I used to include the bootstrap starter template which had the slim version, so my ajax never worked. Jun 9, 2021 at 19:08
  • use this example it seems you only copied some portion of the code. chessboardjs.com/examples#5000
    – Henock
    Jun 12, 2022 at 6:11

1 Answer 1

0

Solved: Needed full version of jQuery instead of slim. Answer from the comments.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.