Sortable List

    Sortable lists is an extension of List View that allows you to sort list view elements.

    Let’s look at layout structure of sortable lists in your list views:

    Where:

    • - “draggable” element (hidden by default) that allows you to sort current list view element

    As you may see it is pretty simple, all you need is to add **sortable** class to list block and put **<div class="sortable-handler"></div>** as a direct child of <li>

    Sortable App Methods

    To enable/disable sorting mode on sortable list we need to use following app methods:

    app.sortable.disable(listEl)- disable sorting mode on sortable list

    • listEl - HTMLElement or string (with CSS Selector). Sortable list block element.

    app.sortable.toggle(listEl)- toggle sorting mode on sortable list

    • listEl - HTMLElement or string (with CSS Selector). Sortable list block element.

    It is possible to configure global sortable behavior on app initialisation by passing sortable related paremeters under sortable property.

    To change these parameters we need to pass them on app init under property, for example:

    Sortable Events

    Sortable will fire the following DOM events on sortable list block element and events on app instance:

    App Instance Events

    It is possible to enable and disable sortable mode using special classes and data attributes on links:

    • To enable sortable mode we need to add **sortable-enable** class to any HTML element (prefered to link)

    • To disable sortable mode we need to add **sortable-disable** class to any HTML element (prefered to link)

    • If you have more than one sortable list in app, you need to specify appropriate sortable list via additional attribute on this HTML element with CSS selector of required sortable list

    Examples