Component

Reorderable list

A list of items that can be reordered

List items can be reordered by drag and drop or by using the up/down buttons. On small viewports the drag and drop feature is disabled to prevent being triggered when scrolling on touch devices.

This component uses SortableJS - a JavaScript library for drag and drop interactions. When JavaScript is disabled a set of inputs will be shown allowing users to provide an order index for each item.

When this component is embedded into a form and that form is submit you will receive a parameter of ordering (which can be customised with the input_name option). This will contain item ids and ordering positions in a hash.

For example, for two items with id “a” and “b” that are ordered accordingly, you’d receive a submission of ordering[a]=1&ordering[b]=2, which Rails can translate to "ordering" => { "a" => "1", "b" => "2" }.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

  1. Budget 2018

  2. Budget 2018 (web)

  3. Impact on households: distributional analysis to accompany Budget 2018

  4. Table 2.1: Budget 2018 policy decisions

  5. Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)

How to call this component

<%= render "govuk_publishing_components/components/reorderable_list", {
  items: [
    {
      id: "ce99dd60-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018"
    },
    {
      id: "d321cb86-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018 (web)"
    },
    {
      id: "63a6d29e-6b6d-4157-9067-84c1a390e352",
      title: "Impact on households: distributional analysis to accompany Budget 2018"
    },
    {
      id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85",
      title: "Table 2.1: Budget 2018 policy decisions"
    },
    {
      id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9",
      title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
    }
  ]
} %>

Accessibility acceptance criteria

Buttons in this component must:

  • be keyboard focusable
  • inform the user about which item they operate on
  • preserve focus after interacting with them

Other examples

With description (preview)

  1. Budget 2018

    PDF, 2.56MB, 48 pages

  2. Budget 2018 (web)

    HTML attachment

  3. Impact on households: distributional analysis to accompany Budget 2018

    PDF, 592KB, 48 pages

  4. Table 2.1: Budget 2018 policy decisions

    MS Excel Spreadsheet, 248KB

  5. Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)

    MS Excel Spreadsheet, 248KB

<%= render "govuk_publishing_components/components/reorderable_list", {
  items: [
    {
      id: "ce99dd60-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018",
      description: "PDF, 2.56MB, 48 pages"
    },
    {
      id: "d321cb86-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018 (web)",
      description: "HTML attachment"
    },
    {
      id: "63a6d29e-6b6d-4157-9067-84c1a390e352",
      title: "Impact on households: distributional analysis to accompany Budget 2018",
      description: "PDF, 592KB, 48 pages"
    },
    {
      id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85",
      title: "Table 2.1: Budget 2018 policy decisions",
      description: "MS Excel Spreadsheet, 248KB"
    },
    {
      id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9",
      title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)",
      description: "MS Excel Spreadsheet, 248KB"
    }
  ]
} %>

Within form (preview)

  1. Budget 2018

  2. Budget 2018 (web)

  3. Impact on households: distributional analysis to accompany Budget 2018

  4. Table 2.1: Budget 2018 policy decisions

  5. Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)

<form>
  <%= render "govuk_publishing_components/components/reorderable_list", {
  items: [
    {
      id: "ce99dd60-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018"
    },
    {
      id: "d321cb86-67dc-11eb-ae93-0242ac130002",
      title: "Budget 2018 (web)"
    },
    {
      id: "63a6d29e-6b6d-4157-9067-84c1a390e352",
      title: "Impact on households: distributional analysis to accompany Budget 2018"
    },
    {
      id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85",
      title: "Table 2.1: Budget 2018 policy decisions"
    },
    {
      id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9",
      title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
    }
  ]
} %>
  <button class="govuk-button" type="submit">Save order</button>
</form>

With custom input name (preview)

  1. Budget 2018

    PDF, 2.56MB, 48 pages

  2. Budget 2020

    PDF, 2.56MB, 48 pages

<%= render "govuk_publishing_components/components/reorderable_list", {
  input_name: "attachments[ordering]",
  items: [
    {
      id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9",
      title: "Budget 2018",
      description: "PDF, 2.56MB, 48 pages"
    },
    {
      id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85",
      title: "Budget 2020",
      description: "PDF, 2.56MB, 48 pages"
    }
  ]
} %>