UI Sortable on table rows with dynamic height

Posted Almost 8 years ago. Visible to the public. Linked content.

UI sortable helps reordering items with drag 'n drop. It works quite fine.

Proven configuration for sorting table rows

When invoking the plugin, you may pass several options Show archive.org snapshot . This set is working fine with table rows:

$tbody.sortable # Invoke on TBODY when ordering tables
  axis: 'y' # Restrict drag direction to "vertically"
  cancel: 'tr:first-child:last-child, input' # Disable sorting a single tr to prevent jumpy table headers
  containment: 'parent' # Only drag within this container
  placeholder: 'ui-sortable-placeholder' # Prevent visibility:hidden
  stop: onSortEnd # See below
  start: onSortStart # See below below

Inside onSortEnd(), you'll react on the reordering. Within forms, you may want to update hidden position fields in the form:

onSortEnd = ->
  positionFields = element.find('input[id$=position]')
  for position, i in positionFields
    $(position).val i + 1

Outside of forms, within lists, you may want to manually post the new positions to some URL:

onSortEnd = ->
  ordered_ids = element.sortable('serialize')
  $.post '/some/url', ordered_ids

The serialize method aggregates the id's of all sortable items (i.e. table rows), which are expected in format <set name>_<id>. For example, tr#position_13 and tr#position_15 will be turned into position[]=13&position[]=15, which neatly resolves to params[:position] == [13, 15] in Rails.

Broken placeholder height

When a dragged row does not have a set height but rather adjusts to its content, the placeholder row does not get the height of the currently dragged item. Further, when using "containment" (which limits dragging to within a given container), it uses wrong containment limits.

You can fix this in the onSortStart callback:

onSortStart = (event, ui) ->
  sortable = $(this).sortable('instance') # Obtain UI sortable instance
  draggedItemHeight = ui.helper.height()
  draggedItemHeight -= 1 if ui.helper.is('tr:first-child') # Design fix

  # Fix placeholder height
  sortable.containment[3] += (draggedItemHeight - ui.placeholder.height())
  ui.placeholder.height draggedItemHeight

Styling

Finally, here are some subtle, but nice styles:

.ui-sortable-handle
  &:hover
    cursor: grab

  // Applied during the drag
  &.ui-sortable-helper
    display: table // Maintain table cell widths

    opacity: 0.7
    transition: opacity 0.3s

    cursor: grabbing

// Fix design issue with UI sortable, causing the thead border-bottom to grow
// when the first table row is dragged
tr.ui-sortable-helper:first-child + tr > td
  border-top: none
jqueryui.com
Dominik Schöler
makandra.de
Say thanks
Last edit
Almost 8 years ago
Dominik Schöler
License
Source code in this card is licensed under the MIT License.

Related cards:

Bulk-change multiple table rows in a migration

Using rename_column, remove_column, etc. more than once in a migration makes that migration run slower than it should. Use change_table instead.

Consider this migration:

add_column :users, :name, :string
remove_column :users, :firs...

Cucumber step to match table rows with Capybara

These steps are now part of Spreewald.

This note describes a Cucumber step that lets you write this:

Then I should see a table with the following rows:
  | Br...

SQL: Find out number of rows of all tables within a MySQL database

Here you are:

SELECT table_name, table_rows FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = 'your_database' order by table_rows;

How to bind an event listener only once with Unpoly

You can use Unpoly's up.on with a named listener function and immediately unbind this event listener with { once: true }:

up.on('up:fragment:inserted', { once: true }, function () { ... })

In Unpoly 1 you c...

Rails: namespacing models with table_name_prefix instead of table_name

When you want to group rails models of a logical context, namespaces are your friend. However, if you have a lot of classes in the same namespace it might be tedious to specify the table name for each class seperately:

class Accounting::I...

How to transition the height of elements with unknown/auto height

If you want to collapse/expand elements with dynamic content (and thus unknown height), you can not transition between height: 0 and height: auto.

Doing it properly, with modern CSS features

In the past, you might have resorted to bulky J...

LibreOffice Calc: How to paste cells without overwriting other cells

The default behavior of Calc is that when you paste cells from the clipboard, it overwrites whatever cells occupy the same space on the spreadsheet. If you would like to insert the cells in the clipboard instead by pushing the existing cells to ...

Dynamically uploading files to Rails with jQuery File Upload

Say we want …

  • to create a Gallery that has a name and has_many :images, which in turn have a caption
  • to offer the user a single form to create a gallery with any number of images
  • immediate uploads with a progress bar per image
  • a snapp...

PSA: When Redis (on LRU noeviction) reaches memory limits, keys with (any) expiry are removed, and keys without are not

In production, you (or your ops team) should configure a maximum number of bytes that Redis can use to store data (maxmemory setting).
They may even want to set maxmemory-policy to noeviction to avoid keys being removed that you want to keep...

Webpacker: Loading code on demand

Sometimes you want to load code on demand. For instance, when a a large library is only used on a single screen, this library should only be loaded for that screen. It should not blow up the bundle size for all screens.

You can load code on deman...

Posted by Dominik Schöler to makandra dev (2016-06-13 14:57)
This website uses short-lived cookies to improve usability.
or learn more