Make a individual items WITHIN a column of a JQuery Sortable table draggable without moving items in other columns - jquery-ui

Question

I want to create a table that has drag-and-drop sortable items within a single column but where the movement of an item in an individual column will not impact the position of items in other columns.
The code below sorts entire rows (both left and right columns), not just the right column. It doesn't seem to be addressed in the JQuery UI docs. Has anyone tried to do this before?
<script>
$(function() {
$("table tbody").sortable({
handle: '.handle'
}).disableSelection();
});
</script>
<table>
<tbody id="sortable">
<tr>
<td>1 - Column Item I Want to Stay In Place</td>
<td class="handle">Item 1 - The Part That Should Be Draggable/Sortable</td>
</tr>
<tr>
<td>2 - Column Item I Want to Stay In Place</td>
<td>Item 2 - The Part That Should Be Draggable/Sortable</td>
</tr>
<tr>
<td>3 - Column Item I Want to Stay In Place</td>
<td class= "handle">Item 3 - The Part That Should Be Draggable/Sortable</td>
</tr>
</table>

Answer 1

I don't believe you can do that with table cells (at least I couldn't get it to work with normal sortables).
There is another option though. Instead of using a table, you could use lists that look like tables.
You can set up a style for columns to define their widths:
.column {
width: 100px;
list-style: none;
float: left;
}
Then, define each column as a list:
<ul class="column">
<li>Fixed 1</li>
<li>Fixed 2</li>
</ul>
<ul class="sortable column">
<li>Sortable 1</li>
<li>Sortable 2</li>
</ul>
<ul class="sortable column">
<li>Sortable 3</li>
<li>Sortable 4</li>
</ul>
Then all you have to do is apply your sortable to the sortable lists:
$(".sortable").sortable();
Here is a fiddle to illustrate: demo
Another option would be to disregard sortables completely and use draggable and droppable controls instead. You would have to manually alter the DOM though using the "drag" and "drop" events of these controls.