我能用JS制作符号吗?

use*_*570 1 html javascript css

我想做的就是创造像"游戏"这样的国际象棋.你应该可以自由地拖动符号,有点像你可以在网上找到的国际象棋助手.真的很简单.

但我的问题是移动符号,是否有人能够提供帮助?

    `<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            width:100%;
            height:100%;
        }

        .black {
            background-color:silver;

        }

        table {
            margin:auto;
            text-align:center;
        }
    </style>
</head>
    <body>
        <table border="1" style="border:1px black solid;">
            <tr>
                <td width="40px" height="40px">&#9820;</td>
                <td class="black" width="40px" height="40px">&#9822;</td>
                <td width="40px" height="40px">&#9821;</td>
                <td class="black" width="40px" height="40px">&#9819;</td>
                <td width="40px" height="40px">&#9818;</td>
                <td class="black" width="40px" height="40px">&#9821;</td>
                <td width="40px" height="40px">&#9822;</td>
                <td class="black" width="40px" height="40px">&#9820;</td>
            </tr>
            <tr>
                <td class="black" width="40px" height="40px">&#9823;</td>
                <td width="40px" height="40px">&#9823;</td>
                <td class="black" width="40px" height="40px">&#9823;</td>
                <td width="40px" height="40px">&#9823;</td>
                <td class="black" width="40px" height="40px">&#9823;</td>
                <td width="40px" height="40px">&#9823;</td>
                <td class="black" width="40px" height="40px">&#9823;</td>
                <td width="40px" height="40px">&#9823;</td>
            </tr>
            <tr>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
            </tr>
            <tr>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
            </tr>
            <tr>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
            </tr>
            <tr>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
            </tr>
            <tr>
                <td width="40px" height="40px">&#9817;</td>
                <td class="black" width="40px" height="40px">&#9817;</td>
                <td width="40px" height="40px">&#9817;</td>
                <td class="black" width="40px" height="40px">&#9817;</td>
                <td width="40px" height="40px">&#9817;</td>
                <td class="black" width="40px" height="40px">&#9817;</td>
                <td width="40px" height="40px">&#9817;</td>
                <td class="black" width="40px" height="40px">&#9817;</td>
            </tr>
            <tr>
                <td class="black" width="40px" height="40px">&#9814;</td>
                <td width="40px" height="40px">&#9816;</td>
                <td class="black" width="40px" height="40px">&#9815;</td>
                <td width="40px" height="40px">&#9813;</td>
                <td class="black" width="40px" height="40px">&#9812;</td>
                <td width="40px" height="40px">&#9815;</td>
                <td class="black" width="40px" height="40px">&#9816;</td>
                <td width="40px" height="40px">&#9814;</td>
            </tr>
        </table>
    </body>
Run Code Online (Sandbox Code Playgroud)

`

Xav*_*jer 5

检查jQueryUI的

可拖动:http://jqueryui.com/draggable/

Droppable:http://jqueryui.com/droppable/

有了这两个,你可以只使用javascript创建象棋游戏