سلام
ممنون میشم کمکم کنید
من میخوام برای درس یادگیری ماشین بازی چکرز را بنویسم
الان برای drag کردن میخواستم از جی کویری استفاده کنم
که با کلاس ها کار میکنه این امکان وجود داره که همزمان از جاوااسکریپت و جی کویری استفاده کرد؟؟؟؟؟؟؟؟
من الان هرکاری میکنم حالت drag کردن را نمتوانمم به dragred بدم
و یه سوال دیگه
میخوام بعد از اینکه drag شد تکرار میکنم بعد از drag شدن مقدار data برابر 0 بشه این امکان وجود دارد
ممنون میشم کمکم کنید
واگر دارم برای اجرای بازی چکرز راه را اشتباه میرم ممنون میشم راهنمایی کنید


<!DOCTYPE html>

<html>

<head>

    <link href="assets/css/animation.css" rel="stylesheet">

    <link href="assets/css/fontello-codes.css" rel="stylesheet">

    <link href="assets/css/fontello-embedded.css" rel="stylesheet">

    <link href="assets/css/fontello-ie7-codes.css" rel="stylesheet">

    <link href="assets/css/fontello-ie7.css" rel="stylesheet">

    <link href="assets/css/fontello.css" rel="stylesheet">

    <script src="assets/js/jquery.js"></script>

    <script src="assets/js/jquery-ui.js"></script>

    <link rel="stylesheet" href="assets/js/jquery-ui.structure.css">

    <link rel="stylesheet" href="assets/js/jquery-ui.theme.css">

    <link rel="stylesheet" href="assets/scss/style.css"> 

    <script src="assets/js/function.js"></script>





    <link rel="stylesheet" href="assets/scss/style.css"> 

    <script src="assets/js/function.js"></script>

<style>

root {

    display: block;

}





body {

    text-align:center;

}





p {

    font-family:monospace;

}





table {

    margin:auto;

}





td {

    width:50px;

    height:50px;

    border: 1px solid black;

    font-size:40px;

    text-align:center;

    font-family:arial, helvetica, sans-serif;

}





}

</style>

    <script src="jquery-3.3.1.min.js"></script>

    <script src="show.js"></script>

</head>

<body>

<head>

    <link href = "matchinggame.css" rel = "stylesheet"/>









</head>





<body>

    <table>

        <tr>

            <td id="cell00" ></td>

            <td id="cell01" ></td>

            <td id="cell02" ></td>

            <td id="cell03" ></td>

            <td id="cell04" ></td>

            <td id="cell05" ></td>

            <td id="cell06" ></td>

            <td id="cell07" ></td>

        </tr>

        <tr>

            <td id="cell10" ></td>

            <td id="cell11" ></td>

            <td id="cell12" ></td>

            <td id="cell13" ></td>

            <td id="cell14" ></td>

            <td id="cell15" ></td>

            <td id="cell16" ></td>

            <td id="cell17" ></td>

        </tr>

        <tr>

            <td id="cell20" ></td>

            <td id="cell21" ></td>

            <td id="cell22" ></td>

            <td id="cell23" ></td>

            <td id="cell24" ></td>

            <td id="cell25" ></td>

            <td id="cell26" ></td>

            <td id="cell27" ></td>

        </tr>

        <tr>

            <td id="cell30" ></td>

            <td id="cell31" ></td>

            <td id="cell32" ></td>

            <td id="cell33" ></td>

            <td id="cell34" ></td>

            <td id="cell35" ></td>

            <td id="cell36" ></td>

            <td id="cell37" ></td>

        </tr>

        <tr>

            <td id="cell40" ></td>

            <td id="cell41" ></td>

            <td id="cell42" ></td>

            <td id="cell43" ></td>

            <td id="cell44" ></td>

            <td id="cell45" ></td>

            <td id="cell46" ></td>

            <td id="cell47" ></td>

        </tr>

        <tr>

            <td id="cell50" ></td>

            <td id="cell51" ></td>

            <td id="cell52" ></td>

            <td id="cell53" ></td>

            <td id="cell54" ></td>

            <td id="cell55" ></td>

            <td id="cell56" ></td>

            <td id="cell57" ></td>

        </tr>

        <tr>

            <td id="cell60" ></td>

            <td id="cell61" ></td>

            <td id="cell62" ></td>

            <td id="cell63" ></td>

            <td id="cell64" ></td>

            <td id="cell65" ></td>

            <td id="cell66" ></td>

            <td id="cell67" ></td>

        </tr>

        <tr>

            <td id="cell70" ></td>

            <td id="cell71" ></td>

            <td id="cell72" ></td>

            <td id="cell73" ></td>

            <td id="cell74" ></td>

            <td id="cell75" ></td>

            <td id="cell76" ></td>

            <td id="cell77" ></td>

        </tr>

    </table>





    <div>

        <input type="button" value="start" id = "button1" onclick="drawBoard();">

    </div>

    <span class="icon-circle m_red"></span>





</body>

</body>









</body>






$(function(){

        $(".dragred").draggable({

            revert:"invalid",

        });

});





var board = [

        [5,2,5,2,5,2,5,2],

        [2,5,2,5,2,5,2,5],

        [5,2,5,2,5,2,5,2],

        [0,5,0,5,0,5,0,5],

        [5,0,5,0,5,0,5,0],

        [1,5,1,5,1,5,1,5],

        [5,1,5,1,5,1,5,1],

        [1,5,1,5,1,5,1,5]

];





function drawBoard() {

        for (var row = 0; row < board.length; row++) {

            for (var col = 0; col < board[row].length; col++) {

                var cell = document.getElementById("cell" + row + col);

                var data=cell.innerHTML = board[row][col];

                var datasbsb=cell.innerHTML = board[row+1][col+1];

                

                if(data==2 && datasbsb===0)

                {

                   var element=document.getElementById("cell" + row + col);

                    element.classList.add("icon-circle");

                    element.classList.add("m_red");

                    element.classList.add("dragred");

                }

        }





    }

}

یه سوال دیگه من اگر نخوام مقدار داخل آرایه ها چاپ بشه منظورم همون عددهااست چی را باید حذف کنم؟؟؟؟؟؟؟/