我想做的是像“游戏”一样创建这个国际象棋。您应该能够自由地拖动符号,有点像您可以在网上找到的国际象棋助手。真的很简单。
但是我的问题是移动符号,有人能帮忙吗?
`<!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">♜</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"></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>
</table>
</body>
`
最佳答案
检查 jQueryUI 的
可拖动:http://jqueryui.com/draggable/
可放置:http://jqueryui.com/droppable/
有了这两个,你可以只使用 javascript 创建一个类似国际象棋的游戏
关于javascript - 我可以使用 JS 使符号可拖动吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21045839/