参考原文链接:
在最近的项目中,我们有这样一个需求,要手动拖动html table中的行(tr)进行排序,
就是我可以将第一行拖到第三行,第四行拖到六行这样子。
一开始我想起了jquery ui中的sortable,发现没有这样的例子。
一筹莫展,于是谷歌之,发现了这位大神的回复。原来人家还是用了jquery ui的sortable
HTML
需要引入jquery和jquery ui的js文件
No.YearTitleGrade
11969Slaughterhouse-FiveA+21952Player PianoB31963Cat's CradleA+41973Breakfast of ChampionsC51965God Bless You, Mr. RosewaterAjavascript:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
其实只需要$("#sort tbody").sortable().disableSelection();就可以了,那么那两个回调函数作用是什么呢?
helper: fixHelperModified,这个函数的作用是:克隆你正在拖动的tr,然后依次设置你克隆的那个tr的td的宽度,使之拖动时的宽度与原来一致。也就是说,不回调这个函数也可以,就是拖动的时候tr中的单元格宽度会变小。当然了不影响放手后的宽度。
stop: updateIndex,这个函数的作用是,拖动后维护现在索引(即第一列的值)。