Ignite UI jQuery Grid Column Moving

A very basic setup of Ignite UI Grid's Column Moving CTP feature. Multi-Column headers and Immediate move mode in addition to using Column Moving events to apply highlight colors to the column being dragged for better visibility.

by secretgspot

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>Grid Column Moving</h1>

<table id="grid"></table>

CSS

.ui-iggrid td.ui-state-moving {
    background: 0;
    background-color: #c2e8f8;
    color: #333;
    font-weight: normal;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    border-color: #b3e2f6;
    border-width:  1px;
}
/* --- Unrelated sample styling --- */
.logo {
    background-image: url('http://www.infragistics.com/uploadedImages/Content/PRODUCTS/jQuery/ignite-secondary-navigation-logo.png');
    background-repeat: no-repeat;
    padding-left: 135px;
    margin: 5px;
    vertical-align: top;
    font-size: 1.2em;
}
body {
    font-size: 0.85em;
    font-family :"Segoe UI", Verdana, Helvetica, Sans-Serif;
}
button {
    text-decoration: none;
    line-height: 1.5em;
    background-color: #ACACAC;
    color: #fff;
    border: none;
}
button:hover {
    background-color: #007FAF;
}
button:active {
    background-color: #00AEEF;
}

JavaScript

var colMovingKey = "";
//Note - array used for data is below

$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js",
    cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css"
});

$.ig.loader("igGrid.ColumnMoving.MultiColumnHeaders", function () {
    $("#grid").igGrid({
        height: "500px",
        autoGenerateColumns: false,
        dataSource: people,
        columns: [{
            key: 'BusinessEntityID',
            dataType: 'number',
            headerText: 'Id',
            width: '100'
        }, {
            headerText: "Name Information",
            key: "nameInformation",
            group: [{
                unbound: true,
                key: 'name',
                dataType: 'string',
                headerText: 'Full Name',
                template: '${FirstName} ${LastName}',
                width: '200'
            }, {
                key: 'FirstName',
                dataType: 'string',
                headerText: 'First name',
                width: '150'
            }, {
                key: 'LastName',
                dataType: 'string',
                headerText: 'Last Name',
                width: '150'
            }]
        }, {
            headerText: "Additional Information",
            key: "addInformation",
            group: [{
                key: 'AdditionalContactInfo',
                dataType: 'string',
                headerText: 'Additional Contact Info',
                width: '100'
            }, {
                key: 'Demographics',
                dataType: 'string',
                headerText: 'Demographics',
                width: '120'
            }]
        }],
        features: [{
            name: "ColumnMoving",
            mode: "immediate",
            type: "dom",
            movingAcceptanceTolerance: 50,
            columnDragStart: function (event, ui) {
                var multiHeader =...