Итак, я так понимаю, вас не интересует один из существующих сетевых плагинов, например jqGrid ? Я бы посоветовал взглянуть на их реализации, чтобы понять, как они перетаскивают столбцы.
У меня не было бы конкретного кода для этого, но вот мои первоначальные мысли о том, как подойти к проблеме.
Изменение размера столбцов
Я бы использовал css table-layout: fixed с тегами <col> для определения ширины столбцов. Таким образом, вашему коду jquery нужно только изменить значение ширины в одном месте, и все ячейки в столбце будут регулировать ширину.
<table width="100%" cellspacing="0">
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
<tr>...</tr>
</table>
Используйте CSS, чтобы поместить невидимый узкий div в правую часть каждой ячейки заголовка: <th>Title<div class="resizer"></div></th>. Этот <div> станет вашим дескриптором изменения размера, и вы захотите, чтобы на нем был CSS для изменения курсора мыши при наведении курсора. Вы даже можете использовать CSS, чтобы немного подтолкнуть его вправо, чтобы он перекрывал границу между столбцами.
Затем примените перетаскиваемое поведение jQuery UI к этому элементу div. Когда элемент перетаскивается, обновите ширину <col> соответствующим образом. То, как вы измените размер, будет зависеть от ваших потребностей и, вероятно, займет немного математики.
В качестве альтернативы, когда невидимый div перетаскивается, вы можете преобразовать его в абсолютно позиционированный узкий div, который увеличивается до высоты таблицы. Вам нужно будет переместить его при перетаскивании мыши и сделать его видимым, чтобы указать, куда вы изменяете размеры столбцов. Затем, как только изменение размера будет выполнено, вы пересчитаете размеры <col> и примените их, измените высоту, чтобы она соответствовала только размеру <th>, и сделаете его снова невидимым.
Перетаскивание столбцов
Это может быть сложнее. Я бы начал с применения перетаскиваемого поведения к <th> элементам. <div>, описанный выше внутри элементов <th>, может иметь поведение, которое можно сбрасывать. Таким образом, вы можете перетащить любой столбец на один из этих элементов и поместить его на них. Когда столбец перетаскивается поверх элемента div, элемент div должен стать видимым, и, возможно, высота столбца.
После того, как пользователь поместит заголовок столбца на один из этих div-элементов панели изменения размера, вам нужно будет перебрать каждую строку таблицы и переместить соответствующий <td> в правильное место. Не забудьте также переместить соответствующие <col> и <th>.
Надеюсь, это поможет вам. Я уверен, что есть примеры этого где-то, если вы посмотрите достаточно внимательно. Но большинство элементов управления сеткой имеют гораздо больше возможностей, чем я бы на самом деле использовал, и кажется, что вы бы предпочли не усложнять ситуацию.
UPDATE
Я только что сделал быстрый поиск в Google и нашел этот плагин . Я еще не посмотрел на источник, но из демоверсии похоже, что он использует подход, аналогичный тому, что я предлагаю. Кажется, это делает работу, но, на мой взгляд, выглядит не очень красиво. Панель изменения размера не соответствует тому, что вы ожидаете, и тому подобное. Но это может помочь.