Skip to content

fix: keep sortable table rows from collapsing while dragging #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hellopablo merged 1 commit into from
Oct 5, 2026
Merged

fix: keep sortable table rows from collapsing while dragging #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/css/admin.plugins.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js/admin.plugins.min.js
View file
Open in desktop

Large diffs are not rendered by default.

120 changes: 100 additions & 20 deletions assets/js/components/Sortable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,28 +33,108 @@ class Sortable {
let handle = $item.data('handle') || null;
let axis = $item.data('axis') || 'y';
let containment = $item.data('containment') || 'parent';
let sortsTableRows = $item.is('tbody');

$item
.sortable({
handle: handle,
axis: axis,
containment: containment,
forceHelperSize: true,
helper: function(e, tr) {
let $originals = tr.children();
let $helper = tr.clone();
$helper
.children()
.each(function(index) {
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).outerWidth());
});
return $helper;
},
stop: function() {
$item.trigger('sortable:sort');
let options = {
handle: handle,
axis: axis,
containment: containment,
forceHelperSize: true,
helper: function(e, sorted) {
let $originals = sorted.children();
let $helper = sorted.clone();
$helper
.children()
.each(function(index) {
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).outerWidth());
});
return $helper;
},
stop: function() {
$item.trigger('sortable:sort');
}
};

// A dragged <tr> cannot keep a height once it leaves its table.
// Lists keep the helper above; only row sortables get a table
// wrapper, a visible placeholder, and cell heights.
if (sortsTableRows) {
options.forcePlaceholderSize = true;
options.placeholder = 'js-admin-sortable__placeholder';
options.appendTo = 'body';
options.helper = function(e, tr) {
let $originals = tr.children();
let $helper = tr.clone();
let widths = [];
let heights = [];

// jQuery UI hides the original row before `start`. Record
// sizes while it is still in flow. A hidden <tr> still
// reports a height, but it is the collapsed one.
$originals.each(function() {
widths.push($(this).outerWidth());
heights.push($(this).outerHeight());
});
tr.data('sortableRowHeight', tr.outerHeight());
tr.data('sortableCellWidths', widths);
tr.data('sortableCellHeights', heights);

let $wrapper = $('<table class="js-admin-sortable__helper"><tbody></tbody></table>');
$wrapper.find('tbody').append($helper);
$wrapper
.width(tr.closest('table').outerWidth())
.appendTo('body');

// Sizes have to be applied once the clone is in the
// document, or the cell padding is not subtracted and
// the preview comes out wider than the table.
$helper.children().each(function(index) {
$(this)
.outerWidth(widths[index])
.outerHeight(heights[index]);
});

return $wrapper;
};
options.start = function(e, ui) {
if (!ui.item.is('tr')) {
return;
}

let $cells = ui.placeholder.children('td');
let height = ui.item.data('sortableRowHeight');

if ($cells.length && height) {
ui.placeholder.outerHeight(height);
$cells.outerHeight(height);
}
})

// forceHelperSize writes the <tr> size onto the wrapper
// after the helper is built. Put the table width back
// and re-apply the cell sizes now that padding applies.
if (ui.helper && ui.helper.hasClass('js-admin-sortable__helper')) {
let widths = ui.item.data('sortableCellWidths') || [];
let cellHeights = ui.item.data('sortableCellHeights') || [];

ui.helper.width(ui.item.closest('table').outerWidth());
ui.helper.find('tr').children().each(function(index) {
if (widths[index]) {
$(this).outerWidth(widths[index]);
}
if (cellHeights[index]) {
$(this).outerHeight(cellHeights[index]);
}
});
if (height) {
ui.helper.outerHeight(height);
}
}
};
}

$item
.sortable(options)
.on('sortable:sort', () => {
$item
.find('.js-admin-sortable__order')
Expand Down
30 changes: 30 additions & 0 deletions assets/sass/admin-plugins/Sortable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,34 @@
cursor: -webkit-grabbing !important;
}
}

// Height on the <tr> is ignored, so the slot is painted on the cells.
// The &nbsp; jQuery UI inserts must not add a second line.
&__placeholder {
> td {
background-color: #f4f7fb;
color: transparent;
font-size: 0;
line-height: 0;
border-top: 1px dashed #c5d0dc;
border-bottom: 1px dashed #c5d0dc;

&:first-child {
border-left: 1px dashed #c5d0dc;
}

&:last-child {
border-right: 1px dashed #c5d0dc;
}
}
}

&__helper {
background-color: #fff;
border-collapse: collapse;
border-spacing: 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
pointer-events: none;
table-layout: fixed;
}
}
Loading