sortable怎么用到table上,我想拖动单元格,做拼图游戏
sortable怎么用到table上,我想拖动单元格,做拼图游戏
sortable怎么用到table上,我想拖动单元格,做拼图游戏
2014-12-31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>拖曳排序插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的运动</span>
</div>
<div class="content">
<table id="ul">
<tbody>
<tr>
<td>1)足球</td>
<td>2)散步</td>
</tr>
<tr>
<td>4)乒乓球</td>
<td>3)篮球</td>
</tr>
<tr>
<td>5)骑自行车</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$(function () {
$("tbody").sortable().disableSelection();
$("tr").sortable().disableSelection();
});
</script>
</body>
</html>反复实验,发现由于table的line之间存在关联,所以你要么就拖动一整行,要么就在一行之内拖动列;
做拼图游戏的方法应该还是用list,你只要把list的<li>的display设置为:inline-block即可.
举报