Edited at

jQuery UIのSortableをTableで使用した際の横幅縮小を解消する方法

More than 1 year has passed since last update.


何が問題か

Sortableは、Tableタグでドラッグした際に横幅が小さくなる現象が発生します。

Tableタグ以外を使えばいいのですが、結構Tableで組みたいことも多いと思います。

そこで、Tableタグで横幅が小さくなる現象を解消します。


実装

これを入れれば解決

$(function(){

function fixPlaceHolderWidth(event, ui){
// adjust placeholder td width to original td width
ui.children().each(function(){
$(this).width($(this).width());
});
return ui;
};

$('.sortable').sortable({
placeholder: 'ui-state-highlight',
start: function(event, ui){
ui.placeholder.height(ui.helper.outerHeight());
},
helper: fixPlaceHolderWidth
});
});


デモ

https://codepen.io/qwe001/pen/QvxaBz