jquery dragtable playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//rawgithub.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//rawgithub.com/akottr/dragtable/master/dragtable.css">
<div>
<h2>jQuery Dragtable playground</h2>
<p>
Click and drag the *name headers
</p>
<h3>Without colspan</h3>
<table class="table dragtable">
<thead>
<tr>
<th>#</th>
<th>Color</th>
<th class="draggable">First Name</th>
<th class="draggable">Last Name</th>
<th class="draggable">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Red</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Blue</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Black</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>With colspan</h3>
<table class="table dragtable">
<thead>
<tr>
<th colspan="2">Color</th>
<th class="draggable">First Name</th>
<th class="draggable">Last Name</th>
<th class="draggable">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Red</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Blue</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>...
JavaScript
$('.dragtable').dragtable({dragaccept:'.draggable'})