使用可拖动插件搞乱Css

时间:2014-04-02 21:24:51

标签: jquery html css

我正在使用拖动表插件,但它正在做一些奇怪的事情,当我点击拖动它的css行为奇怪我附加图片和我可以任何人告诉为什么它的行为像必须赞赏。这是拖动列,但准时拖动看起来像。

enter image description here

的index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DragTableAndMatainDisplayOrder</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<style>
    .tftable
    {
        font-size: 12px;
        color: #333333;
        width: 100%;
        border-width: 1px;
        border-color: #9dcc7a;
        border-collapse: collapse;
    }

    .tftable th
    {
        text-align:center;
        font-weight:bold;
        font-size: 12px; 
        background-color: #abd28e;
        border-width: 1px;
        padding: 8px; border-style: solid;
        border-color: #9dcc7a;
        text-align: left;"
    }

    .tftable tr
    {
        background-color: #ffffff;
    }

    .tftable td
    {
        font-size: 12px;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #9dcc7a;
    }

</style>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/libraries/jquery.js"></script>
<script type="text/javascript" src="js/libraries/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/libraries/dragtable.js"></script>    

<script type="text/javascript">
  $(document).ready(function() {
          console.log("dom ready");
    $('#randomTable').dragtable();

    });

   </script>

</head>

<body>

   <div id="body">

     <table class="tftable draggable" border="1" id="randomTable">
                    <tr>
                        <th>SNO</th>
                        <th>Date</th>
                        <th>Total Order</th>
                        <th>Total Amount</th>
                        <th>Total Item</th>
                        <th>Total Sale</th>
                    </tr>
                    <tr>
                        <td>20</td>
                        <td>19/03/2013</td>
                        <td>98</td>
                        <td>34</td>
                        <td>90</td>
                        <td>88</td> 
                    </tr>
                     <tr>
                        <td>20</td>
                        <td>19/03/2013</td>
                        <td>98</td>
                        <td>34</td>
                        <td>90</td>
                        <td>88</td> 
                    </tr>
                     <tr>
                        <td>20</td>
                        <td>19/03/2013</td>
                        <td>98</td>
                        <td>34</td>
                        <td>90</td>
                        <td>88</td> 
                    </tr>
                     <tr>
                        <td>20</td>
                        <td>19/03/2013</td>
                        <td>98</td>
                        <td>34</td>
                        <td>90</td>
                        <td>88</td> 
                    </tr>
                </table>
    </div> 
</body> 
</html>

1 个答案:

答案 0 :(得分:0)

您还需要包含dragtable.css