codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Drag and Drop & Update Database

    19th October 2013

    Jquery Misc

    jquery icon

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
     
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Drag & Drop reorder</title>
    <link href="../style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <style>
    ul {
    padding:0px;
    margin: 0px;
    }
    #response {
    padding:10px;
    background-color:#9F9;
    border:2px solid #396;
    margin-bottom:20px;
    }
    #list li {
    margin: 0 0 3px;
    padding:8px;
    background-color:#333;
    color:#fff;
    list-style: none;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
      function slideout(){
      setTimeout(function(){
      $("#response").slideUp("fast", function () {
          });
        
    }, 1000);}
        $("#response").hide();
    $(function() {
    $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
    var order = $(this).sortable("serialize") + '&update=update';
    $.post("updateList.php", order, function(theResponse){
    $("#response").html(theResponse);
    $("#response").slideDown('fast');
    slideout();
    });
    }   
    });
    });
     
    });
    </script>
    </head>
    <body>
     
    <div id="container">
      <div id="list">
     
        <div id="response"> </div>
        <ul>
          <?php
                    include("connect.php");
    $query  = "SELECT * FROM panels ORDER BY panelnum ASC";
    $result = mysql_query($query);
    while($row = mysql_fetch_array($result, MYSQL_ASSOC))
    {
    $id = stripslashes($row['ID']);
    $text = stripslashes($row['camppan']);
    ?>
          <li id="arrayorder_<?php echo $id ?>"> <?php echo $text; ?>
            <div class="clear"></div>
          </li>
          <?php } ?>
        </ul>
      </div>
    </div>
     
     
    </body>
    </html>
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN