KISS jQuery plugin for table column reorganisation via drag'n'drop. Requires jquery-ui with draggable and droppable support of course.

example.html

{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}fusion/table.css" />
{% endblock %}

{% block extra_body %}
{% block jquery_ui %}
    <script src="{{ STATIC_URL }}fusion/jquery-ui.js" type="text/javascript"></script>
{% endblock %}

<script type="text/javascript" src="{{ STATIC_URL }}fusion/table.js"></script>
<script type="text/javascript">
        $('.bloc-content table')
            .on('columnMoved', function(e) {
                var table = $(this).yourlabsTable();

                if (table.xhr) table.xhr.abort();

                data = {
                    columns: [],
                };
    
                table.table.find('[data-widget-pk]').each(function() {
                    if ($(this).parents('table.helper').length) return;

                    data.columns.push({widget_pk: $(this).data('widget-pk')})
                });
                    
                table.xhr = $.ajax('{% url 'fusion_list_update' object.pk %}', {
                    'data': {data: JSON.stringify(data)},
                    'type': 'POST',
                })
            })
            .yourlabsTable();

    });
</script>
{% endblock %}

table.css

.dragging {
    display: none;
}

.resize-handle {
    float: right;
}

.droppable-target {
    background-color: green;
}

.helper {
    width: 80px;
}

.placeholder {
    width: 0px;
}

.placeholder.active {
    width: 2px;
    background-color: #90EE90;
    border-color: #90EE90;
}

.placeholder.usable.active {
    background-color: green;
    border-color: green;
}

table.js

if (window.yourlabs == undefined) window.yourlabs = {};

// Resizing is temporarely disabled because the browser ignores it.
yourlabs.Table = function(table) {
    // <table> element.
    this.table = table;

    // Index of the column being drag.
    this.dragIndex = null;

    // Index of the column being hovered or drop on.
    this.dropIndex = null;

    // Resize column handle which will be appended to th.
    // this.resizeHandleHtml = '<span class="handle resize-handle"></span>';

    // Selector string for resizeHandleHtml.
    // this.resizeHandleSelector = '.resize-handle';

    // Drag column handle which will be prepended to th.
    this.dragHandleHtml = '<span class="handle drag-handle"></span>';

    // Selector string for dragHandleHtml.
    this.dragHandleSelector = '.drag-handle';

    // CSS class for the column being drag. Will be set on all td, ths.
    this.dragColumnClass = 'dragging';

    // Selector string for the column being drag.
    this.dragColumnSelector = '.' + this.dragColumnClass;

    // HTML used to create the semi transparent drag helper. It will be filled
    // with copies of the contents of the column being drag.
    this.helperTableHtml = '<table class="helper">';

    // Cell HTML used to create placeholder columns.
    this.placeholderHtml = '<td class="placeholder"></td>';

    // Selector string for placeholderHtml
    this.placeholderSelector = '.placeholder';

    // CSS class that should be added to placeholder when they become active.
    this.placeholderActiveClass = 'active';

    // Selector string for active placeholders
    this.placeholderActiveSelector = [
        this.placeholderSelector,
        '.',
        this.placeholderActiveClass
    ].join('')
}

yourlabs.Table.prototype.initialize = function() {
    this.table.find('th')
        .prepend(this.dragHandleHtml)
        .draggable({
            cursor: 'move',
            helper: $.proxy(this.dragHelper, this),
            start: $.proxy(this.dragStart, this),
            stop: $.proxy(this.dragStop, this),
            handle: this.dragHandleSelector,
            tolerance: 'pointer',
            opacity: 0.65,
            axis: 'x',
        });
    
    this.createPlaceholders();
    
    this.table.find('th, td')
        .droppable({
            greedy: true,
            tolerance: 'pointer',
            over: $.proxy(this.dropOver, this),
            drop: $.proxy(this.dragStop, this),
        });

    
    // this.table.find('th')
    //     .append(this.resizeHandleHtml)

    // $(this.resizeHandleSelector)
    //     .on('mousedown', $.proxy(this.resizeStart, this))

    // $(document)
    //     .on('mousemove', $.proxy(this.resize, this))
    //     .on('mouseup', $.proxy(this.resizeStop, this))

    // this.createPlaceholders();
}

// yourlabs.Table.prototype.resizeStart = function(e) {
//     this.resizing = $(e.currentTarget).parents('th, td');
//     this.initialX = e.pageX;
//     this.initialWidth = this.resizing.width();
// }
// yourlabs.Table.prototype.resize = function(e) {
//     if(this.resizing !== false) {
//         $(this.resizing).width(this.initialWidth+(e.pageX-this.initialX));
//     }
// }
// yourlabs.Table.prototype.resizeStop = function(e) {
//     if(this.resizing !== false) {
//         this.resizing = false;
//     }
// }

// Remove all placeholder cells.
yourlabs.Table.prototype.removePlaceholders = function() {
    this.table.find(this.placeholderSelector).remove()
}

// Create a placeholder column after each actual column.
yourlabs.Table.prototype.createPlaceholders = function() {
    this.table.find('th, td').before(this.placeholderHtml);
    this.table.find('tr').append(this.placeholderHtml)
}

yourlabs.Table.prototype.dragHelper = function(e) {
    this.dragIndex = $(e.currentTarget).index() + 1;

    var rows = [];

    this.getColumn(this.dragIndex).each(function() {
        rows.push('<tr>')
        rows.push($('<tr>').html($(this).clone()).html());
        rows.push('</tr>')
    })

    return $(this.helperTableHtml).html(rows.join(''));
}

// On drag start, note the dragged column index and set dragColumnClass.
yourlabs.Table.prototype.dragStart = function(e, ui) {
    this.dragIndex = $(e.currentTarget).index() + 1;
    this.getColumn(this.dragIndex).addClass(this.dragColumnClass);
}

// On drag stop, get the drop column index, move the cells, trigger columnMoved
// and clean up.
yourlabs.Table.prototype.dragStop = function(e, ui) {
    if (this.dragIndex == null) {
        // dragStop was already called.
        return;
    }

    this.dropIndex = this.table.find(
        this.placeholderActiveSelector + ':first').index();

    this.table.find(this.placeholderActiveSelector)
        .removeClass(this.placeholderActiveClass)

    this.table.find(this.dragColumnSelector)
        .removeClass(this.dragColumnClass);

    var dragColumn = this.getColumn(this.dragIndex);
    var dropColumn = this.getColumn(this.dropIndex);

    for (var i=0; i<dragColumn.length; i++) {
        $(dragColumn.get(i)).insertAfter(dropColumn.get(i))
    }

    this.dragIndex = null;
    this.dropIndex = null;

    this.removePlaceholders();
    // Trigger columnMoved while the table is clean from fake columns.
    this.table.trigger('columnMoved');
    this.createPlaceholders();
}

// Return all cells of a particular column.
yourlabs.Table.prototype.getColumn = function(index) {
    return this.table.find(
        'td:nth-child(' + index + '), th:nth-child(' + index + ')');
}

// On drop over, update active placeholder.
yourlabs.Table.prototype.dropOver = function(e, ui) {
    this.dropIndex = $(e.target).index() + 1;

    this.activePlaceholder = this.dropIndex + 1;

    this.table.find(this.placeholderSelector)
        .removeClass(this.placeholderActiveClass)
    this.getColumn(this.activePlaceholder)
        .addClass(this.placeholderActiveClass)
}

$.fn.yourlabsTable = function(overrides) {
    if (this.length < 1) return;

    var overrides = overrides ? overrides : {};

    if (this.data('yourlabsTable') == undefined) {
        var table = new yourlabs.Table(this);
        table = $.extend(table, overrides);
        this.data('yourlabsTable', table);
        table.initialize();
    }

    return this.data('yourlabsTable');
}