jQuery UI: Sorting Between Tables

The jQuery UI sortable interaction widget has an option called connectWith. This option let's us connect our sortable instances with other sortables. That is, not only can you drag elements to sort them within the primary sortable, but you can drag them into the connected sortable. This setup can work bidirectionally too — you can drag the item back to the original sortable after it's been moved out. This drag and drop behavior, I've found, to be especially useful for connecting table data.

Here's an example that illustrates how to connect two tables so that the user can drag rows freely between the two. The code is incredibly straightforward — the two sortables only need the connectWith value specified.