JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<ul id="sortable">
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">1</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">2</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">3</div>
            <div class="panel-body"></div>
        </div>
    </li>
</ul>

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    border:2px solid #f8e287;
    background:#fef9e7
}
.col-xs-4 {
    width: 33%;     
}

JavaScript

$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    placeholder: 'col-xs-4 panel-al-placeholder',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});