Sortable | Commerce Frontend Development

Thanks to Atwix for contributing this topic!

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

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:

$('#sortable').sortable();
Copied to your clipboard
$('#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:

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

            $('#sortable').sortable();
        });
</script>
Copied to your clipboard
<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

`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.

<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>
Copied to your clipboard
<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>