jquery draggable across columns but not rows

I'm looking for a jQuery plugin that will allow me to drag items across columns but not rows.

So say I have a table of 2 rows and 3 columns.

All the items begin in column 1 with some in row 1 and some in row two.

Now, items in row one can only be dragged into columns in the same row and same for items in row two.

T开发者_开发百科here are plenty of drag-drop plugins out there but none that i've seen that let me do this.

Much like an agile planning board if you've used one

edit

Or is there a plugin that i can use to move only to elements of a certain name?

Using jQuery UI, give each row in the table an indication of what row it is and use the accept option of droppable to limit where a specific draggable can be dropped.

In this example div elements are draggable, placed inside td elements of the table. Each tr has it's id attribute set to row-x where x is the row number. The accept function checks if the droppable td element's row number is the same as the row number the draggable comes from.

$("div").draggable({ revert: 'invalid' });

$("td").droppable({
    accept: function(draggable) {
        var droppable_row = $(this).parent().attr("id").split("-")[1];
        var draggable_row = draggable.parent().parent().attr("id").split("-")[1];

        return droppable_row == draggable_row;
    }
});

Here's a demo: http://jsfiddle.net/EHA46/