Sortable widget

The Sortable widget is a customized jQuery Sortable Widget that allows you to reorder sortable items using Up and Down buttons.

The Sortable widget is only available in the adminhtml area.

The widget source file is <Magento_Theme_module_dir>/view/adminhtml/web/js/sortable.js.

Initialize the Sortable widget

For information about how to initialize a widget in a JS component or .phtml template, see the Initialize JavaScript topic.

Use the sortable() function to instantiate the Sortable widget:

1
$('#sortable').sortable();

Where:

  • #sortable is the selector of the block element where Sortable is initialized.

The following example shows a PHTML file using the script:

1
2
3
4
5
6
7
8
9
10
<script>
    require([
            'jquery',
            'Magento_Theme/js/sortable'
        ], function ($) {
            'use strict';

            $('#sortable').sortable();
        });
</script>

Methods, Options and Events inheritance

Most options, methods, and events for the Sortable widget correspond to the jQuery Sortable Widget options.

Options

The Sortable has only two custom options that are different from default Sortable Widget options.

moveUpEvent

The name of the event which moves a sortable item up.

Type: String

Default value: 'moveUp'

moveDownEvent

The name of the event which moves a sortable item down.

Type: String

Default value: 'moveDown'

Code sample

This example shows how to initialize the sortable widget.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<ul id="sortable-list">
    <li>
        <div>
            <span>Sortable Item #1</span>
        </div>
        <input type="button" class="up" title="Up" value="Up">
        <input type="button" class="down" title="Down" value="Down">
    </li>
    <li>
        <div>
            <span>Sortable Item #2</span>
        </div>
        <input type="button" class="up" title="Up" value="Up">
        <input type="button" class="down" title="Down" value="Down">
    </li>
    <li>
        <div>
            <span>Sortable Item #3</span>
        </div>
        <input type="button" class="up" title="Up" value="Up">
        <input type="button" class="down" title="Down" value="Down">
    </li>
</ul>

<script>
require([
    "jquery",
    "jquery/ui",
    "Magento_Theme/js/sortable"
], function ($) {
    'use strict';

    $('#sortable-list').sortable({
       axis: 'y',
       tolerance: 'pointer',
       items: 'li'
    });
});
</script>

Result

As a result, we see the list of sortable items that can be sorted via Up, Down buttons or via dragging.

Sortable widget initial view Example Sortable widget sorted view Example