Sortable - Documentation | www.HtmlElements.com

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.