为了账号安全,请及时绑定邮箱和手机立即绑定

sortable怎么用到table上,我想拖动单元格,做拼图游戏

sortable怎么用到table上,我想拖动单元格,做拼图游戏

正在回答

1 回答

<!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即可.

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

sortable怎么用到table上,我想拖动单元格,做拼图游戏

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信