javascript - 我可以使用 JS 使符号可拖动吗?

标签 javascript html 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>

`

最佳答案

检查 jQueryUI 的

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

可放置:http://jqueryui.com/droppable/

有了这两个,你可以只使用 javascript 创建一个类似国际象棋的游戏

关于javascript - 我可以使用 JS 使符号可拖动吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21045839/

相关文章:

html - 即使元素嵌套在不同级别,也可以选择页面上某种类型的第一个元素

html - 我如何在 CSS/HTML 中获得粘性页脚?

javascript - 使弹出窗口出现在表格中的超链接上

javascript - UIWebView 产生大约 :blank requests when iframe appended

javascript - 如何使用 jQuery 从创建的弹出窗口重定向创建弹出窗口的页面?

html - 为什么 `max-width` 在以下简单示例中不起作用?

html - 避免 ie contentEditable 元素在 Enter 键上创建段落

创建 li 元素并将文本分配给数据属性的 JavaScript 被 chop

javascript - 如何检测是否有水平滚动条?

html - 将 div 高度减少一定量