Overview

Smart.Sortable represents a wrapper control whose children become sortable items that can be reordered via dragging or programmatically.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.sortable.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class.
    • smart.sortable.js - the JS file containing the definition for the element.

Usage

  • Import a module

    With this approach, we import a module and create the web component by using the Smart function. The #sortable is a smart-sortable tag.

    import {smartSortable} from "../../../source/modules/smart.sortable.js";
    
    Smart('#sortable', class {
    get properties() {
        return {
            dragMode: 'handle'
        }
    }
    });
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    
    }
    
    Using the Smart function is optional. You can use const sortable = document.querySelector("#sortable"); and set the properties like that:
    const sortable = document.querySelector("#sortable");
    
    sortable.dragMode = 'handle';
    
  • Import a module, Init on Demand

    The following imports the web component's module and creates it on demand, when the document is ready. The #sortable is a DIV tag.

    import { smartSortable } from "../../../source/modules/smart.sortable.js";
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() {
        const sortable = new smartSortable('#sortable', {
            dragMode: 'handle'
        });
    }
    
  • Load scripts

    The following code adds the custom element to the page.

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="./../../source/styles/smart.default.css" type="text/css" />
        <script type="text/javascript" src="../../source/smart.element.js"></script>
        <script type="text/javascript" src="../../source/smart.sortable.js"></script>
    </head>
    <body>
        <smart-sortable drag-mode="handle">
            <img src="../../images/squirrel-row-1-col-5.jpg" />
            <img src="../../images/squirrel-row-1-col-1.jpg" />
            <img src="../../images/squirrel-row-1-col-4.jpg" />
            <img src="../../images/squirrel-row-1-col-3.jpg" />
            <img src="../../images/squirrel-row-1-col-2.jpg" />
        </smart-sortable>
    </body>
    </html>
    

    Note how smart.element.js is declared before everything else. This is mandatory for all custom elements.

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const sortable = document.createElement('smart-sortable');

Append it to the DOM:
document.body.appendChild(sortable);

Remove it from the DOM:
sortable.parentNode.removeChild(sortable);

Set a property:
sortable.propertyName = propertyValue;

Get a property value:
const propertyValue = sortable.propertyName;

Invoke a method:
sortable.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

sortable.addEventListener(eventName, eventHandler);

Remove Event Listener:
sortable.removeEventListener(eventName, eventHandler, true);

Making Items Sortable

To make a group of HTML elements with similar characteristics sortable, place them inside a smart-sortable custom element. Items can then be dragged via the mouse.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="./../../source/styles/smart.default.css" />
    <script type="text/javascript" src="../../source/smart.element.js"></script>
    <script type="text/javascript" src="../../source/smart.sortable.js"></script>
</head>
<body>
    <smart-sortable mode="horizontal">
        <img src="../../images/squirrel-row-1-col-5.jpg" />
        <img src="../../images/squirrel-row-1-col-1.jpg" />
        <img src="../../images/squirrel-row-1-col-4.jpg" />
        <img src="../../images/squirrel-row-1-col-3.jpg" />
        <img src="../../images/squirrel-row-1-col-2.jpg" />
    </smart-sortable>
</body>
</html>

Demo

If the items you need to be sortable are not direct children of the smart-sortable custom element, you can set the items property to an appropriate CSS selector to determine the sortable items by, e.g.:

<smart-sortable items="li">
    <ol>
        <li>Strawberries</li>
        <li>Mango</li>
        <li>Watermelon</li>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Grapes</li>
        <li>Pineapples</li>
        <li>Oranges</li>
        <li>Raspberries</li>
        <li>Peaches</li>
        <li>Cherries</li>
        <li>Kiwi</li>
        <li>Blueberries</li>
        <li>Pomegranate</li>
        <li>Lemons</li>
    </ol>
</smart-sortable>

Reordering with Drag Handle

As an alternative, sortable items can be reordered by dragging a "handle" which can be enabled by setting the property dragMode to 'handle'. Another property, handleVisibility, determines whether a sortable item's drag handle is always visible or is shown when the item is hovered.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="./../../source/styles/smart.default.css" />
    <script type="text/javascript" src="../../source/smart.element.js"></script>
    <script type="text/javascript" src="../../source/smart.sortable.js"></script>
</head>
<body>
    <smart-sortable drag-mode="handle" handle-visibility="visible">
        <div>Strawberries</div>
        <div>Mango</div>
        <div>Watermelon</div>
        <div>Apples</div>
    </smart-sortable>
</body>
</html>

Demo

The position of the drag handle can be changed by setting the property handlePosition to 'right', 'left', 'top', or 'bottom':

<smart-sortable drag-mode="handle" handle-visibility="visible" handle-position="left">
    <div>Strawberries</div>
    <div>Mango</div>
    <div>Watermelon</div>
    <div>Apples</div>
</smart-sortable>

Methods

Smart.Sortable has the following methods:

  • move(fromIndex, toIndex) - moves a sortable item from one index to another.
  • updateItems() - re-evaluates the items that can be sorted. Useful after items have been added to or removed from the custom element.