jquery dragable across columns but not rows

Question

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.

There 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?

Answer 1

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/