DRAG DROP SORT DASHBOARD EXAMPLE

by bizamajig

HTML

<!doctype html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>navigation template</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                var h_bt = 0; //variable to keep track of the div#bottom condition.

                $('a#handler_bottom').on('click', function(event) {

                    event.preventDefault();

                    if (h_bt == 0) {

                        //$('div#bottom').animate({top:'600px'}, 300);
                        //$('div#top').css({'background-color': 'red'});

                        $(this).parent().animate({
                            top: '350px'
                        }, 300);
                        $(this).css({
                            'background-color': '#abadb4'
                        });

                        h_bt = 1;
                    } else {

                        $(this).parent().animate({
                            top: '460px'
                        }, 300);
                        $(this).css({
                            'background-color': '#abadb4'
                        });

                        h_bt = 0;
                    }
                });



                var countContents = $('ul#contents li').length;
                var widthContent = $('ul#contents li').width() + 100;

                // stretch the contents width to contain all the <li> element
                $('ul#contents').width(widthContent * countContents);


                $('.move').on('click', function(event) {
                    event.preventDefault();
                    var ind = $(this).index();
                    var move = -widthContent * ind + "px";
                    $('ul#contents').animate({
                        left: move
   ...