Datatables Horizontal Scroll with colreorder

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://datatables.net/release-datatables/extras/ColReorder/media/js/ColReorder.js"></script>
<h3>Steps to reproduce</h3>
<ol>
    <li>Scroll all the way to the right to see the grade column</li> 
    <li>Drag the grade column and try to place it as a first column in the table, i.e. place it before Engine column</li>
    <li>The Horizontal scroll bar does not scroll beyond a certain position</li>
<li>
As result of this we need to first drag the grade column before the platform column and then manually move the scroll bar to see the first column, and then perform another drag operation to position it as the first column in our table.
</li></ol>
<hr/>
<button id="right-button">
Scroll
</button>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"
id="example">

JavaScript

$(document).ready(function () {
    var aaData = [
    /* Reduced data set */
    ["Trident", "Internet Explorer 4.0", "Win 95+", 4, "X"],
        ["Trident", "Internet Explorer 5.0", "Win 95+", 5, "C"],
        ["Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A"],
        ["Trident", "Internet Explorer 6.0", "Win 98+", 6, "A"],
        ["Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A"],
        ["Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A"],
        ["Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A"],
        ["Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A"],
        ["Webkit", "Safari 1.2", "OSX.3", 125.5, "A"],
        ["Webkit", "Safari 1.3", "OSX.3", 312.8, "A"],
        ["Webkit", "Safari 2.0", "OSX.4+", 419.3, "A"],
        ["Webkit", "Safari 3.0", "OSX.4+", 522.1, "A"]
    ]
    var aoColumns = [{
        "sTitle": "Engine"
    }, {
        "sTitle": "Browser"
    }, {
        "sTitle": "Platform"
    }, {
        "sTitle": "Version",
            "sClass": "center"
    }, {
        "sTitle": "Grade",
            "sClass": "center"
    }];

    $("#example").dataTable({
        "sDom": 'Rtp',
            "bAutoWidth": true,
            "bProcessing": false,
            "sScrollXInner": "2000px",
            "bFilter": false,
            "sScrollX": "100%",
            "bScrollCollapse": true,
            "iDisplayLength": 10,
            "aaData": aaData,
            "aoColumns": aoColumns
    });
});