JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<body>
     <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4 sortable">
                <div>
                    content1a
                </div>
            </div>
            <div class="span4 sortable">
                <div>
                    content2a
                </div>
            </div>
            <div class="span4 sortable">
                <div>
                    content3a
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span3 sortable">
                <div>
                    content1b
                </div>
            </div>
            <div class="span3 sortable">
                <div>
                    content2b
                </div>
            </div>

            <div class="span3 sortable">
                <div>
                    content3b
                </div>
            </div>

            <div class="span3 sortable">
                <div>
                    content4b
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 sortable">
                <div>
                    content1c
                </div>
            </div>

            <div class="span6 sortable">
                <div>
                    content2c
                </div>
            </div>
        </div>
    </div>

</body>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
body {
    padding: 10px;
}
.sortable {
    
background: #ccc;
}

JavaScript

sourcePositionLeft = 0,
            sourcePositionTop = 0,
            targetPositionLeft = 0,
            targetPositionTop = 0,
            handlePortletSortable = function () {
                if (!jQuery().draggable) {
                    return;
                }
                if (!jQuery().droppable) {
                    return;
                }

                $(".sortable").draggable({
                    opacity: 0.9,
                    revert: "invalid",
                    revertDuration: 500,
                    zIndex: 5000,
                    start: function (event, ui) {
                        var startPosition = ui.helper.position();
                        sourcePositionLeft = startPosition.left;
                        sourcePositionTop = startPosition.top;
                    }
                });
                $(".sortable").droppable({
                    accept: ".sortable",
                    tolerance: "intersect",
                    drop: function(event, ui) {
                        var dropPosition = $(this).position();
                        targetPositionLeft = dropPosition.left;
                        targetPositionTop = dropPosition.top;
                        swapTiles(ui.draggable, $(this));
                    }
                });

            },
            swapTiles = function(source, target) {
                moveTile(target, sourcePositionLeft, sourcePositionTop);
                moveTile(source, targetPositionLeft, targetPositionTop);
            },
            moveTile = function(tile, positionLeft, positionTop) {
                tile.animate({
                    left: positionLeft,
                    top: positionTop,
                },
                {
                    easing: 'swing',
                    step: function () { return false; },
                    complete: function () { return false; },
                    always: function () { return false; }
                });
            },