Sortable-arindam

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

<div class="row cards ui-sortable" id="sortable">
        <div id="dashboardBirthdays" class="card-container">
            <small>Birthdays Of This Week</small>
        </div>
        <div id="dashboardCalendar" class="card-container">
            <small>calendar</small>
        </div><div id="dashboardLatestDiscussions" class="card-container">
            <small>  Latest Discussions</small>
        </div><div id="dashboardLatestEvents" class="card-container">
            <small> Latest Events </small>
        </div>
    </div>

CSS

#sortable {
            list-style-type: none;
            text-align:center;
            margin: 0;
            padding: 0;
            width: 50%;
            color: #ff00dc;
        }

            #sortable li {
                margin: 0 3px 3px 3px;
                padding: 0.4em;
                padding-left: 1.5em;
                font-size: 1.4em;
                height: 18px;
                color: #0094ff;
            }

JavaScript

$(function () {
            $("#sortable").sortable({
                update: function (event, ui) {
                    console.log(ui.item);
                    var currPos2 = ui.item.index();
                    var content = ui.item.attr("id");
                    alert(content + "  " + currPos2);
                }
            });
            $("#sortable").disableSelection();
        });