Jquery draggable不能在我的代码中工作

时间：2014-01-21 06:07:36

标签： javascript jquery html css jquery-ui

我正在尝试使用具有被拖动属性的表来创建页面。代码有点乱，但这里是：

<!DOCTYPE html>
<head>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript">
      $(document).ready(function(){
        $(".smsSecond").draggable();
      });
    </script>

</head>
<body>
    <div id="top">
        <div id="topLogo">
            <a href="#"><img src="images/logo_big.png"  height="50" width="310"/></a>
        </div>
        <div id="topLogoR">
            <img src="images/right logo.png"  height="60" width="300"/><br/>
            <font color="#335599">Logged in as XXXXXXXXXX: </font>
            <select>
                <option value="online"><font color="#335599">Online</font></option>
                <option value="offline"><font color="#335599">Offline</font></option>
                <option value="away"><font color="#335599">Away</font></option>
                <option value="busy"><font color="#335599">Busy</font></option>
                <option value="others"><font color="#335599">Others</font></option>
            </select></font>
        </div>
    </div>

    <div id="topnav">
        <ul id="nav">

    <li><a href="#">MENU 1</a>
        <!--ul>
            <li><a href="#">MENU 1-1</a></li>
            <li><a href="#">MENU 1-1</a></li>
        </ul-->
    </li>
    <li><a href="#">MENU 2</a>
        <!--ul>
            <li><a href="#">MENU 2-1</a></li>
            <li><a href="#">MENU 2-2</a></li>                       
        </ul-->
    </li>
    <li><a href="#">MENU 3</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 3-1</a></li>
            <li><a href="#">MENU 3-2</a></li>                       
        </ul>
    </li>
     <li><a href="#">MENU 4</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 4-1</a></li>
            <li><a href="#">MENU 4-2</a><!--span class="rarrow"> &#9654; </span-->
                <!--ul>
                    <li><a href="#">MENU 4-2-1</a></li>
                    <li><a href="#">MENU 4-2-2</a></li>
                    <li><a href="#">MENU 4-2-3</a></li>
                    <li><a href="#">MENU 4-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>   



    <li><a href="#">MENU 5</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 5-1</a></li>
            <li><a href="#">MENU 5-2</a><!--span class="rarrow"> &#9654; </span-->
                <!--ul>
                    <li><a href="#">MENU 5-2-1</a></li>
                    <li><a href="#">MENU 5-2-2</a></li>
                    <li><a href="#">MENU 5-2-3</a></li>
                    <li><a href="#">MENU 5-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>   


    <li><a href="#">MENU 6</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 6-1</a></li>
            <li><a href="#">MENU 6-2</a><!--span class="rarrow"> &#9654; </span-->
                <!--ul>
                    <li><a href="#">MENU 6-2-1</a></li>
                    <li><a href="#">MENU 6-2-2</a></li>
                    <li><a href="#">MENU 6-2-3</a></li>
                    <li><a href="#">MENU 6-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>


    <li><a href="#">MENU 7</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 7-1</a></li>
            <li><a href="#">MENU 7-2</a><!--span class="rarrow"> &#9654; </span-->
                <!--ul>
                    <li><a href="#">MENU 7-2-1</a></li>
                    <li><a href="#">MENU 7-2-2</a></li>
                    <li><a href="#">MENU 7-2-3</a></li>
                    <li><a href="#">MENU 7-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>   

    <li><a href="#">MENU 8</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 8-1</a></li>
            <li><a href="#">MENU 8-2</a><!--span class="rarrow"> &#9654; </span-->
                <!--ul>
                    <li><a href="#">MENU 8-2-1</a></li>
                    <li><a href="#">MENU 8-2-2</a></li>
                    <li><a href="#">MENU 8-2-3</a></li>
                    <li><a href="#">MENU 8-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>   

    <li><a href="#">MENU 9</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 9-1</a></li>
            <li><a href="#">MENU 9-2</a><!--span class="rarrow"> &#9654; </span-->
                <!--ul>
                    <li><a href="#">MENU 9-2-1</a></li>
                    <li><a href="#">MENU 9-2-2</a></li>
                    <li><a href="#">MENU 9-2-3</a></li>
                    <li><a href="#">MENU 9-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>   


    <li><a href="#">MENU 10</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 10-1</a></li>
            <li><a href="#">MENU 10-2</a><!--span class="rarrow"> &#9654; </span>
                <ul>
                    <li><a href="#">MENU 10-2-1</a></li>
                    <li><a href="#">MENU 10-2-2</a></li>
                    <li><a href="#">MENU 10-2-3</a></li>
                    <li><a href="#">MENU 10-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>

    <li><a href="#">MENU 11</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 11-1</a></li>
            <li><a href="#">MENU 11-2</a><!--span class="rarrow"> &#9654; </span>
                <ul>
                    <li><a href="#">MENU 11-2-1</a></li>
                    <li><a href="#">MENU 11-2-2</a></li>
                    <li><a href="#">MENU 11-2-3</a></li>
                    <li><a href="#">MENU 11-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>   

    <li><a href="#">MENU 12</a><span class="rarrow"> &#9660; </span>
        <ul>
            <li><a href="#">MENU 12-1</a></li>
            <li><a href="#">MENU 12-2</a><!--span class="rarrow"> &#9654; </span>
                <ul>
                    <li><a href="#">MENU 12-2-1</a></li>
                    <li><a href="#">MENU 12-2-2</a></li>
                    <li><a href="#">MENU 12-2-3</a></li>
                    <li><a href="#">MENU 12-2-4</a></li>
                </ul-->
            </li>                       
        </ul>
    </li>

    </ul>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>    
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

   </div>


   <div id="page">
    <div id="leftcolumn">
        <p class="form">
            <form class="form-inline" role="form">

                <div class="form-group">
                    <label class="sr-only" for="ticket">Ticket</label>
                    <input type="text" class="form-control" id="exampleInputPassword2" placeholder="TICKET">
                </div>
                <br/>
                <br/>
                <!--button type="submit" class="btn btn-success">SUBMIT</button-->

                <!--grey button for grey template-->
                <button class="btn btn-default" type="submit">SUBMIT</button>

            </form>
        </p>
        <p class="form">
            <form class="form-inline" role="form">

                <div class="form-group">
                    <label class="sr-only" for="ticket">Ticket</label>
                    <input type="text" class="form-control" id="exampleInputPassword2" placeholder="TICKET">
                </div>
                <br/>
                <br/>
                <!--button type="submit" class="btn btn-success">SUBMIT</button-->
                <button class="btn btn-default" type="submit">SUBMIT</button>

            </form>
        </p>
        <p class="form">
            <form class="form-inline" role="form">

                <div class="form-group">
                    <label class="sr-only" for="ticket">Ticket</label>
                    <input type="text" class="form-control" id="exampleInputPassword2" placeholder="TICKET">
                </div>
                <br/>
                <br/>
                <!--button type="submit" class="btn btn-success">SUBMIT</button-->
                <!--button type="submit" class="btn btn-primary">SUBMIT</button-->
                <!--a href="#" class="btn btn-default btn-lg active" role="button">SUBMIT</a-->
                <button class="btn btn-default" type="submit">SUBMIT</button>

            </form>
        </p>

    </div>

    <div class="maincol">   
        <div id="inner">
        <div class="t"> 

            <form class="form-inline" role="form">

                <div class="form-group">
                    <label class="sr-only" for="ticket">Ticket</label>
                    <input type="text" class="form-control" id="exampleInputPassword2" placeholder="TICKET">
                </div>
                <br/>
                <br/>
                <!--button type="submit" class="btn btn-success">SUBMIT</button-->
                <!--button type="submit" class="btn btn-primary">SUBMIT</button-->
                <!--a href="#" class="btn btn-default btn-lg active" role="button">SUBMIT</a-->
                <button class="btn btn-default" type="submit">SUBMIT</button>

            </form>
            <br/>
    <table class="smsSecond"><!--bgcolor="#4ab54d"><class="smsSecond"--     this is td bgcolor: bgcolor="#4ab54d"-->
        <tr>
             <td colspan="2" width="auto" align="center">Ticket Info</td>
        </tr>

        <!--odd row-->
        <tr align="center"><!-- style="color: #000000; font-size: 12px;"-->
            <td>
                Ticket number
            </td>
            <td>
                HFK-864-69976
            </td>
        </tr>


        <!--even row-->
        <tr align="center"><!--style="color: #000000; font-size: 15px; background-color: #FFFFFF" --><!--background-color: #A4EAF6-->
            <td>
                Department
            </td>
            <td>
                Support
            </td>
        </tr>

        <!--odd row-->
        <tr align="center">
            <td>
                Priority
            </td>
            <td>
                P3-Normal
            </td>
        </tr>

        <!--even row-->
        <tr align="center">
            <td>
                Open Date and Time
            </td>
            <td>
                2011-02-28 21:24:01          
            </td>
        </tr>

        <!--odd row-->
        <tr align="center">
            <td>
                Close Date and Time
            </td>
            <td>
                2011-02-28 21:24:01
            </td>
        </tr>

        <!--even row-->
        <tr align="center">
            <td>
                Total Time
            </td>
            <td>
                00:03:09
            </td>
        </tr>

        <!--odd row-->
        <tr align="center">
            <td>
                Ticket Spent
            </td>
            <td>
                00:02:00
            </td>
        </tr>

        <!--even row-->
        <tr align="center">
            <td>
                No. of staff worked
            </td>
            <td>
                2
            </td>
        </tr>

        <!--odd row-->
        <tr align="center">
            <td>
                Ticket Status
            </td>
            <td>
                Closed
            </td>
        </tr>

        <!--even row-->
        <tr align="center">
            <td>
                SLA
            </td>
            <td>
                Yes
            </td>
        </tr>

        <!--odd row-->
        <tr align="center">
            <td>
                Type
            </td>
            <td>
                Issue
            </td>
        </tr>

        <!--even row-->
        <tr align="center">
            <td>
                Red Flag
            </td>
            <td>
                0
            </td>
        </tr>

        <!--odd row-->
        <tr align="center">
            <td>
                Yellow Flag
            </td>
            <td>
                0
            </td>
        </tr>

        <!--even row-->
        <tr align="center">
            <td>
                Orange Flag
            </td>
            <td>
                0
            </td>
        </tr>

        <!--odd row-->
        <tr align="center">
            <td>
                Closed by
            </td>
            <td>
                Harsha p
            </td>
        </tr>
    </table>


    </div>
    </div>

    </div>

    </div>      

</body>
</html>

具有类.smsSecond的表需要是dragbale，这似乎不起作用。请帮忙。

3 个答案:

答案 0 :(得分：2)

您的代码似乎运行正常。它是否适用于this example？

更新

查看更新的代码，问题是您使用的是两个不同版本的jquery。

首先来到这里：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

然后：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>

删除jquery 1.4的脚本标记

答案 1 :(得分：1)

您的代码似乎没问题。尝试将表放在div中。然后通过div的选择器调用draggable（）（使用ID）。如需更多帮助，请转至jquery draggable

答案 2 :(得分：1)

复制粘贴和工作，这绝对是在做什么在这里演示 http://jsfiddle.net/E5HXf/ 

 <html>

    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript">
      $(document).ready(function(){
        $(".smsSecond").draggable();
      });
    </script>

    </head>
    <body>

    <div class="maincol">
    <div id="inner">
        <div class="t">
            <form class="form-inline" role="form">
                <div class="form-group">
                    <label class="sr-only" for="ticket">Ticket</label>
                    <input type="text" class="form-control" id="exampleInputPassword2" placeholder="TICKET">
                </div>
                <br/>
                <br/>
                <button class="btn btn-default" type="submit">SUBMIT</button>
            </form>
            <br/>
            <table class="smsSecond" style="background:grey">
                <!--bgcolor="#4ab54d"><class="smsSecond"--     this is td bgcolor: bgcolor="#4ab54d"-->
                <tr>
                    <td colspan="2" width="auto" align="center">Ticket Info</td>
                </tr>
                <!--odd row-->
                <tr align="center">
                    <!-- style="color: #000000; font-size: 12px;"-->
                    <td>Ticket number</td>
                    <td>HFK-864-69976</td>
                </tr>
                <!--even row-->
                <tr align="center">
                    <!--style="color: #000000; font-size: 15px; background-color: #FFFFFF" -->
                    <!--background-color: #A4EAF6-->
                    <td>Department</td>
                    <td>Support</td>
                </tr>
                <!--odd row-->
                <tr align="center">
                    <td>Priority</td>
                    <td>P3-Normal</td>
                </tr>
                <!--even row-->
                <tr align="center">
                    <td>Open Date and Time</td>
                    <td>2011-02-28 21:24:01</td>
                </tr>
            </table>
        </div>
    </div>



    </body>

    </html>
相关问题
最新问题