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" }
.
How it looks (preview) (preview all)
-
Budget 2018
-
Budget 2018 (web)
-
Impact on households: distributional analysis to accompany Budget 2018
-
Table 2.1: Budget 2018 policy decisions
-
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
Standard options
This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.
id
- accepts a string for the element ID attributedata_attributes
- accepts a hash of data attributesaria
- accepts a hash of aria attributesclasses
- accepts a space separated string of classes, these should not be used for styling and must be prefixed withjs-
margin_bottom
- accepts a number from0
to9
(0px
to60px
) using the GOV.UK Frontend spacing scale (defaults to no margin)role
- accepts a space separated string of roleslang
- accepts a language attribute valueopen
- accepts an open attribute value (true or false)hidden
- accepts an empty string, ‘hidden’, or ‘until-found’tabindex
- accepts an integer. The integer can also be passed as a string.dir
- accepts ‘rtl’, ‘ltr’, or ‘auto’.
With description (preview)
-
Budget 2018
PDF, 2.56MB, 48 pages
-
Budget 2018 (web)
HTML attachment
-
Impact on households: distributional analysis to accompany Budget 2018
PDF, 592KB, 48 pages
-
Table 2.1: Budget 2018 policy decisions
MS Excel Spreadsheet, 248KB
-
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)
<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)
-
Budget 2018
PDF, 2.56MB, 48 pages
-
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"
}
]
} %>