我努力学习jQueryUI的排序功能，以使其在我使用我的网页上的响应工作表中。
我做了一个jsfiddle做一些测试，我只是无法弄清楚如何拖放列（不仅是日的）。
我怀疑我应该用“connectWith”（或“项目”？）选项，连接所有TD的共享同一ID比拖个，但我只是不这样做成功。
我甚至不能确定这就是“connectWith”或“项目”是为做实际上却没有什么别的我可以说似乎帮助我实现列拖放的文件中找到。
HTML：
<html>
<body>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS：
*html, body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
body:before{
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
table{
table-layout: fixed;
margin: 0 auto;
border-collapse: collapse;
overflow: hidden;
white-space: nowrap;
width:100%;
color:#000;
float:left;
}
tr{
display:table-row;
border: 1px solid black
}
th, td {
border:1px solid #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: table-cell;
text-align:center;
}
th{
position: relative;
background:#bbb;
}
jQuery的：
$( function() {
$('thead tr').sortable({
start: function(e, ui)
{
var ind_th= ui.item.index();
$('tbody td:nth-child('+(ind_th+1)+')').addClass('drg').css('color','red');
},
connectWith:".drg",
stop: function(e, ui)
{
$('tbody td').removeClass('drg')
}
});
});
谢谢您的帮助。
这不完全漂亮，但它会做的工作。
工作实例：https://jsfiddle.net/Twisty/q7oyh9mj/53/
JavaScript的
$(function() {
$('thead tr').sortable({
containment: "parent",
placeholder: "placeholder",
opacity: 0.5,
helper: "clone",
axis: 'x',
start: function(e, ui) {
var ind_th = ui.item.index();
$('tbody tr').each(function(ind, el) {
$('td', el).eq(ind_th).addClass('drg').css('color', 'red');
});
},
stop: function(e, ui) {
var itInd = ui.item.index();
$("tbody tr").each(function(ind, el) {
var cell = $(".drg", el).detach();
cell.insertBefore($("td", el).eq(itInd));
cell.removeClass("drg").css("color", "black");
});
}
});
$('thead tr').disableSelection();
});
您还可以创建使用function(event, element)了自己的助手，但它不stop或update网好。
因此，在start，我加入类drg，以帮助识别，将获得移动的细胞。一旦stop被触发，我用.detach()从行删除它们，然后insertBefore()它们放回根据标题索引行中的新位置。
如果你有大量的数据，我会建议看数据表。我相信它提供了这个功能。
更新
新范例：https://jsfiddle.net/Twisty/q7oyh9mj/72/
两个小的变化：
containment;这是防止头部从拖动超出表的边界，不能被放置在第一位置。if的时候滴点应该是最后一个项目您还可以调整tolerance选项：https://jsfiddle.net/Twisty/q7oyh9mj/73/
您的选择如何管理它。
希望帮助。