1. 首頁
  2. 問答
  3. Jquery draggable不工作在我的代碼

Jquery draggable不工作在我的代碼

2014-01-21 81 views
3

我想在這裏創建一個頁面，具有被拖動屬性的表。該代碼是有點混亂，但在這裏它是：Jquery draggable不工作在我的代碼

<!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類，這DOEN似乎沒有工作表。請幫忙。

來源

2014-01-21 Utkarsh Singh

+0

擺脫腳本標記的解釋 「不工作」 –

+0

它在Mozilla工作。我可以拖動你的桌子。你究竟想要什麼？ – Era

+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

來源

2014-01-21 06:22:51 tankerjoe

+0

我只是把我正在工作的整個代碼和draggable（）函數似乎並沒有在這裏工作。 –

+0

你可以分享你正在使用的整個代碼嗎？你發佈的部分對我（和其他人）工作正常。也許還有另一個問題是阻止代碼執行。 – tankerjoe

+0

我只是編輯發佈的代碼，我已經把我正在工作的整個代碼。 @tankerjoe –

1

您的代碼似乎沒問題。嘗試將表格放在div中。然後通過該div的選擇器（使用ID）調用draggable（）。如需更多幫助，請訪問jquery draggable

來源

2014-01-21 06:17:43

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>

來源

2014-01-21 06:21:57

相關問題

 相關問題