Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Jquery draggable not working in my code

Tags:

javascript

html

jquery

css

jquery-ui

i am trying to create a page here with a table having the property of being dragged. the code is a bit messy but here it is:

<!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>

the table with the class .smsSecond needs to be dragbale, which doen not seem to work. please help.

like image 587
Utkarsh Singh Avatar asked Nov 20 '25 03:11

Utkarsh Singh

2 Answers

Your code seems to work fine. Does it work for you in this example?

Update:

Looking at updated your code, the problem is you are using two different versions of jquery.

First here: 

<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>

Then later:

<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>

Get rid of the script tags for jquery 1.4

like image 77
tankerjoe Avatar answered Nov 22 '25 15:11

tankerjoe

Your code seems OK. try to place the table in a div. then call draggable() by that div's selector(use an ID). for more help please go to jquery draggable

like image 39
silk_route11 Avatar answered Nov 22 '25 16:11

silk_route11
Sign in to Comment

Related questions

commander.js simple use case: one single file argument
knockout checked binding - only one checked
Ajax Call in For Loop, For Loop Completing Before all Calls are Made
Alternative to Javascript's prompt() for Google Chrome Web App

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!