@fr0st/ui-sortable 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 elusivecodes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# FrostUI Sortable
+
+**FrostUI Sortable** is a free, open-source Sortable component for *JavaScript*.
+
+It is built on top of the [FrostUI](https://github.com/elusivecodes/FrostUI) library.
+
+
+## Table Of Contents
+- [Installation](#installation)
+- [Usage](#usage)
+
+
+
+## Installation
+
+**Dependencies**
+
+- [fQuery](https://github.com/elusivecodes/fQuery)
+- [FrostUI](https://github.com/elusivecodes/FrostUI)
+
+**CSS**
+
+```html
+<link rel="stylesheet" href="/path/to/frost-ui.min.css" />
+```
+
+**JS**
+
+```html
+<script type="text/javascript" src="/path/to/frost-ui-bundle.min.js"></script>
+<script type="text/javascript" src="/path/to/frost-ui-sortable.min.js"></script>
+```
+
+
+## Usage
+
+Check the demo folder for examples. Full documentation and website coming soon™.

package/dist/frost-ui-sortable.js

@@ -0,0 +1,327 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fr0st/ui'), require('@fr0st/query')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@fr0st/ui', '@fr0st/query'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.UI = global.UI || {}, global.UI, global.fQuery));
+})(this, (function (exports, ui, $) { 'use strict';
+
+    /**
+     * Sortable Class
+     * @class
+     */
+    class Sortable extends ui.BaseComponent {
+        /**
+         * New Sortable constructor.
+         * @param {HTMLElement} node The input node.
+         * @param {object} [options] The options to create the Sortable with.
+         */
+        constructor(node, options) {
+            super(node, options);
+
+            this._selector = this._options.items;
+            if (this._options.handle) {
+                this._selector += ' ' + this._options.handle;
+            }
+
+            this._enabled = !this._options.disabled;
+
+            this._refreshCursors();
+            this._events();
+        }
+
+        /**
+         * Disable the Sortable.
+         */
+        disable() {
+            this._enabled = false;
+        }
+
+        /**
+         * Dispose the Sortable.
+         */
+        dispose() {
+            $.removeEventDelegate(this._node, 'mousedown.ui.sortable touchstart.ui.sortable');
+            $.removeEvent(this._node, 'receive.ui.sortable');
+
+            this._target = null;
+            this._currentSortable = null;
+
+            super.dispose();
+        }
+
+        /**
+         * Enable the Sortable.
+         */
+        enable() {
+            this._enabled = true;
+        }
+
+        /**
+         * Get the Sortable item elements.
+         * @return {array} The Sortable item elements.
+         */
+        items() {
+            return $.find(this._options.items, this._node);
+        }
+    }
+
+    /**
+     * Attach events for the Sortable.
+     */
+    function _events() {
+        const downEvent = (e) => {
+            if (
+                e.button ||
+                !this._enabled ||
+                $.is(e.currentTarget, this._options.cancel) ||
+                $.getDataset(this._node, 'uiDragging')
+            ) {
+                return false;
+            }
+
+            if (e.type === 'mousedown') {
+                e.preventDefault();
+            }
+
+            this._target = this._options.handle ?
+                this.items().find((node) => $.hasDescendent(node, e.currentTarget)) :
+                e.currentTarget;
+        };
+
+        const moveEvent = (e) => {
+            this._pos = ui.getPosition(e);
+
+            if (!$.getDataset(this._node, 'uiDragging')) {
+                $.setDataset(this._node, { uiDragging: true });
+
+                this._startIndex = $.index(this._target);
+                this._currentIndex = this._startIndex;
+
+                $.triggerEvent(this._node, 'sort.ui.sortable', {
+                    detail: {
+                        target: this._target,
+                    },
+                });
+
+                if (this._options.helperClass) {
+                    $.addClass(this._target, this._options.helperClass);
+                }
+
+                this._currentSortable = this._node;
+
+                if (this._options.scroll) {
+                    this._checkScroll();
+                }
+            }
+
+            let nearestSortable = this._node;
+
+            if (this._options.connectWith) {
+                const connected = $.find(this._options.connectWith)
+                    .filter((node) => {
+                        const sortable = this.constructor.init(node);
+
+                        return sortable._options.dropOnEmpty || sortable.items().length;
+                    });
+
+                if (connected.length) {
+                    nearestSortable = $.nearestTo([this._node, ...connected], this._pos.x, this._pos.y, { offset: true });
+                }
+            }
+
+            const nearestItems = $.isSame(this._node, nearestSortable) ?
+                this.items() :
+                this.constructor.init(nearestSortable).items();
+
+            const nearestItem = $.nearestTo(nearestItems, this._pos.x, this._pos.y, { offset: true });
+
+            if (!nearestItem) {
+                return;
+            }
+
+            this._updateTarget(nearestItem, this._pos.x, this._pos.y);
+
+            const newIndex = $.index(this._target);
+
+            if (!$.isSame(nearestSortable, this._currentSortable)) {
+                $.triggerEvent(this._currentSortable, 'send.ui.sortable', {
+                    detail: {
+                        target: this._target,
+                    },
+                });
+
+                $.triggerEvent(nearestSortable, 'receive.ui.sortable', {
+                    detail: {
+                        target: this._target,
+                    },
+                });
+            } else if (this._currentIndex !== newIndex) {
+                $.triggerEvent(nearestSortable, 'sorting.ui.sortable', {
+                    detail: {
+                        target: this._target,
+                    },
+                });
+            }
+
+            this._currentIndex = newIndex;
+            this._currentSortable = nearestSortable;
+        };
+
+        const upEvent = (e) => {
+            if (!$.getDataset(this._node, 'uiDragging')) {
+                this._target = null;
+                return;
+            }
+
+            if (e.type === 'mouseup') {
+                e.preventDefault();
+            }
+
+            $.triggerEvent(this._currentSortable, 'sorted.ui.sortable', {
+                detail: {
+                    target: this._target,
+                },
+            });
+
+            if (this._options.helperClass) {
+                $.removeClass(this._target, this._options.helperClass);
+            }
+
+            if (this._currentIndex !== this._startIndex || !$.isSame(this._currentSortable, this._node)) {
+                $.triggerEvent(this._currentSortable, 'update.ui.sortable', {
+                    detail: {
+                        target: this._target,
+                    },
+                });
+            }
+
+            $.removeDataset(this._node, 'uiDragging');
+
+            if (this._checkScrollTimer) {
+                clearTimeout(this._checkScrollTimer);
+                this._checkScrollTimer = null;
+            }
+
+            this._target = null;
+            this._currentSortable = null;
+            this._currentIndex = null;
+            this._startIndex = null;
+        };
+
+        const dragEvent = $.mouseDragFactory(downEvent, moveEvent, upEvent);
+
+        $.addEventDelegate(this._node, 'mousedown.ui.sortable touchstart.ui.sortable', this._selector, dragEvent);
+
+        $.addEvent(this._node, 'receive.ui.sortable', (_) => {
+            this._refreshCursors();
+        });
+    }
+
+    /**
+     * Check for window scroll.
+     */
+    function _checkScroll() {
+        $.hide(this._target);
+
+        const originalX = $.getScrollX(window);
+        const originalY = $.getScrollY(window);
+
+        let offsetX = originalX;
+        let offsetY = originalY;
+
+        if (this._pos.y < originalY + this._options.scrollSensitivity) {
+            offsetY = Math.max(0, originalY - this._options.scrollSpeed);
+        } else if (this._pos.y > originalY + $.height(window) - this._options.scrollSensitivity) {
+            const docHeight = $.height(document, { boxSize: $.SCROLL_BOX });
+            offsetY = Math.min(docHeight, originalY + this._options.scrollSpeed);
+        }
+
+        if (this._pos.x < originalX + this._options.scrollSensitivity) {
+            offsetX = Math.max(0, originalX - this._options.scrollSpeed);
+        } else if (this._pos.x > originalX + $.width(window) - this._options.scrollSensitivity) {
+            const docWidth = $.width(document, { boxSize: $.SCROLL_BOX });
+            offsetX = Math.min(docWidth, originalX + this._options.scrollSpeed);
+        }
+
+        if (offsetX !== originalX || offsetY !== originalY) {
+            $.setStyle(':root', { scrollBehavior: 'initial' });
+            $.setScroll(document, offsetX, offsetY);
+            $.setStyle(':root', { scrollBehavior: '' });
+
+            this._pos.x += offsetX - originalX;
+            this._pos.y += offsetY - originalY;
+        }
+
+        $.show(this._target);
+
+        this._checkScrollTimer = setTimeout((_) => {
+            this._checkScroll();
+        }, 0);
+    }
+    /**
+     * Refresh Sortable item cursors.
+     */
+    function _refreshCursors() {
+        const elements = $.find(this._selector, this._node);
+
+        $.setStyle(elements, { cursor: this._options.cursor });
+    }
+    /**
+     * Update the target element.
+     * @param {HTMLElement} nearestItem The current nearest item.
+     * @param {number} x The mouse X position.
+     * @param {number} y The mouse Y position.
+     */
+    function _updateTarget(nearestItem, x, y) {
+        const nearestCenter = $.center(nearestItem, { offset: true });
+        const targetCenter = $.center(this._target, { offset: true });
+
+        let method;
+        if (this._options.axis === 'y' || nearestCenter.x === targetCenter.x) {
+            method = y < nearestCenter.y ?
+                'before' :
+                'after';
+        } else if (this._options.axis === 'x' || nearestCenter.y === targetCenter.y) {
+            method = x < nearestCenter.x ?
+                'before' :
+                'after';
+        } else {
+            method = x < nearestCenter.x && y < nearestCenter.y ?
+                'before' :
+                'after';
+        }
+
+        $[method](nearestItem, this._target);
+    }
+
+    // Sortable default options
+    Sortable.defaults = {
+        appendTo: 'body',
+        axis: null,
+        cancel: 'input, textarea, button, select, option',
+        connectWith: null,
+        cursor: 'auto',
+        disabled: false,
+        dropOnEmpty: true,
+        handle: null,
+        helperClass: 'bg-body-tertiary',
+        items: ':scope > li',
+        scroll: true,
+        scrollSensitivity: 20,
+        scrollSpeed: 5,
+    };
+
+    // Sortable prototype
+    const proto = Sortable.prototype;
+
+    proto._checkScroll = _checkScroll;
+    proto._events = _events;
+    proto._refreshCursors = _refreshCursors;
+    proto._updateTarget = _updateTarget;
+
+    // Sortable init
+    ui.initComponent('sortable', Sortable);
+
+    exports.Sortable = Sortable;
+
+}));
+//# sourceMappingURL=frost-ui-sortable.js.map

package/dist/frost-ui-sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frost-ui-sortable.js","sources":["../src/sortable.js","../src/prototype/events.js","../src/prototype/helpers.js","../src/index.js"],"sourcesContent":["import $ from '@fr0st/query';\nimport { BaseComponent } from '@fr0st/ui';\n\n/**\n * Sortable Class\n * @class\n */\nexport default class Sortable extends BaseComponent {\n    /**\n     * New Sortable constructor.\n     * @param {HTMLElement} node The input node.\n     * @param {object} [options] The options to create the Sortable with.\n     */\n    constructor(node, options) {\n        super(node, options);\n\n        this._selector = this._options.items;\n        if (this._options.handle) {\n            this._selector += ' ' + this._options.handle;\n        }\n\n        this._enabled = !this._options.disabled;\n\n        this._refreshCursors();\n        this._events();\n    }\n\n    /**\n     * Disable the Sortable.\n     */\n    disable() {\n        this._enabled = false;\n    }\n\n    /**\n     * Dispose the Sortable.\n     */\n    dispose() {\n        $.removeEventDelegate(this._node, 'mousedown.ui.sortable touchstart.ui.sortable');\n        $.removeEvent(this._node, 'receive.ui.sortable');\n\n        this._target = null;\n        this._currentSortable = null;\n\n        super.dispose();\n    }\n\n    /**\n     * Enable the Sortable.\n     */\n    enable() {\n        this._enabled = true;\n    }\n\n    /**\n     * Get the Sortable item elements.\n     * @return {array} The Sortable item elements.\n     */\n    items() {\n        return $.find(this._options.items, this._node);\n    }\n}\n","import $ from '@fr0st/query';\nimport { getPosition } from '@fr0st/ui';\n\n/**\n * Attach events for the Sortable.\n */\nexport function _events() {\n    const downEvent = (e) => {\n        if (\n            e.button ||\n            !this._enabled ||\n            $.is(e.currentTarget, this._options.cancel) ||\n            $.getDataset(this._node, 'uiDragging')\n        ) {\n            return false;\n        }\n\n        if (e.type === 'mousedown') {\n            e.preventDefault();\n        }\n\n        this._target = this._options.handle ?\n            this.items().find((node) => $.hasDescendent(node, e.currentTarget)) :\n            e.currentTarget;\n    };\n\n    const moveEvent = (e) => {\n        this._pos = getPosition(e);\n\n        if (!$.getDataset(this._node, 'uiDragging')) {\n            $.setDataset(this._node, { uiDragging: true });\n\n            this._startIndex = $.index(this._target);\n            this._currentIndex = this._startIndex;\n\n            $.triggerEvent(this._node, 'sort.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n\n            if (this._options.helperClass) {\n                $.addClass(this._target, this._options.helperClass);\n            }\n\n            this._currentSortable = this._node;\n\n            if (this._options.scroll) {\n                this._checkScroll();\n            }\n        }\n\n        let nearestSortable = this._node;\n\n        if (this._options.connectWith) {\n            const connected = $.find(this._options.connectWith)\n                .filter((node) => {\n                    const sortable = this.constructor.init(node);\n\n                    return sortable._options.dropOnEmpty || sortable.items().length;\n                });\n\n            if (connected.length) {\n                nearestSortable = $.nearestTo([this._node, ...connected], this._pos.x, this._pos.y, { offset: true });\n            }\n        }\n\n        const nearestItems = $.isSame(this._node, nearestSortable) ?\n            this.items() :\n            this.constructor.init(nearestSortable).items();\n\n        const nearestItem = $.nearestTo(nearestItems, this._pos.x, this._pos.y, { offset: true });\n\n        if (!nearestItem) {\n            return;\n        }\n\n        this._updateTarget(nearestItem, this._pos.x, this._pos.y);\n\n        const newIndex = $.index(this._target);\n\n        if (!$.isSame(nearestSortable, this._currentSortable)) {\n            $.triggerEvent(this._currentSortable, 'send.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n\n            $.triggerEvent(nearestSortable, 'receive.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n        } else if (this._currentIndex !== newIndex) {\n            $.triggerEvent(nearestSortable, 'sorting.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n        }\n\n        this._currentIndex = newIndex;\n        this._currentSortable = nearestSortable;\n    };\n\n    const upEvent = (e) => {\n        if (!$.getDataset(this._node, 'uiDragging')) {\n            this._target = null;\n            return;\n        }\n\n        if (e.type === 'mouseup') {\n            e.preventDefault();\n        }\n\n        $.triggerEvent(this._currentSortable, 'sorted.ui.sortable', {\n            detail: {\n                target: this._target,\n            },\n        });\n\n        if (this._options.helperClass) {\n            $.removeClass(this._target, this._options.helperClass);\n        }\n\n        if (this._currentIndex !== this._startIndex || !$.isSame(this._currentSortable, this._node)) {\n            $.triggerEvent(this._currentSortable, 'update.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n        }\n\n        $.removeDataset(this._node, 'uiDragging');\n\n        if (this._checkScrollTimer) {\n            clearTimeout(this._checkScrollTimer);\n            this._checkScrollTimer = null;\n        }\n\n        this._target = null;\n        this._currentSortable = null;\n        this._currentIndex = null;\n        this._startIndex = null;\n    };\n\n    const dragEvent = $.mouseDragFactory(downEvent, moveEvent, upEvent);\n\n    $.addEventDelegate(this._node, 'mousedown.ui.sortable touchstart.ui.sortable', this._selector, dragEvent);\n\n    $.addEvent(this._node, 'receive.ui.sortable', (_) => {\n        this._refreshCursors();\n    });\n};\n","import $ from '@fr0st/query';\n\n/**\n * Check for window scroll.\n */\nexport function _checkScroll() {\n    $.hide(this._target);\n\n    const originalX = $.getScrollX(window);\n    const originalY = $.getScrollY(window);\n\n    let offsetX = originalX;\n    let offsetY = originalY;\n\n    if (this._pos.y < originalY + this._options.scrollSensitivity) {\n        offsetY = Math.max(0, originalY - this._options.scrollSpeed);\n    } else if (this._pos.y > originalY + $.height(window) - this._options.scrollSensitivity) {\n        const docHeight = $.height(document, { boxSize: $.SCROLL_BOX });\n        offsetY = Math.min(docHeight, originalY + this._options.scrollSpeed);\n    }\n\n    if (this._pos.x < originalX + this._options.scrollSensitivity) {\n        offsetX = Math.max(0, originalX - this._options.scrollSpeed);\n    } else if (this._pos.x > originalX + $.width(window) - this._options.scrollSensitivity) {\n        const docWidth = $.width(document, { boxSize: $.SCROLL_BOX });\n        offsetX = Math.min(docWidth, originalX + this._options.scrollSpeed);\n    }\n\n    if (offsetX !== originalX || offsetY !== originalY) {\n        $.setStyle(':root', { scrollBehavior: 'initial' });\n        $.setScroll(document, offsetX, offsetY);\n        $.setStyle(':root', { scrollBehavior: '' });\n\n        this._pos.x += offsetX - originalX;\n        this._pos.y += offsetY - originalY;\n    }\n\n    $.show(this._target);\n\n    this._checkScrollTimer = setTimeout((_) => {\n        this._checkScroll();\n    }, 0);\n};\n\n/**\n * Refresh Sortable item cursors.\n */\nexport function _refreshCursors() {\n    const elements = $.find(this._selector, this._node);\n\n    $.setStyle(elements, { cursor: this._options.cursor });\n};\n\n/**\n * Update the target element.\n * @param {HTMLElement} nearestItem The current nearest item.\n * @param {number} x The mouse X position.\n * @param {number} y The mouse Y position.\n */\nexport function _updateTarget(nearestItem, x, y) {\n    const nearestCenter = $.center(nearestItem, { offset: true });\n    const targetCenter = $.center(this._target, { offset: true });\n\n    let method;\n    if (this._options.axis === 'y' || nearestCenter.x === targetCenter.x) {\n        method = y < nearestCenter.y ?\n            'before' :\n            'after';\n    } else if (this._options.axis === 'x' || nearestCenter.y === targetCenter.y) {\n        method = x < nearestCenter.x ?\n            'before' :\n            'after';\n    } else {\n        method = x < nearestCenter.x && y < nearestCenter.y ?\n            'before' :\n            'after';\n    }\n\n    $[method](nearestItem, this._target);\n};\n","import { initComponent } from '@fr0st/ui';\nimport Sortable from './sortable.js';\nimport { _events } from './prototype/events.js';\nimport { _checkScroll, _refreshCursors, _updateTarget } from './prototype/helpers.js';\n\n// Sortable default options\nSortable.defaults = {\n    appendTo: 'body',\n    axis: null,\n    cancel: 'input, textarea, button, select, option',\n    connectWith: null,\n    cursor: 'auto',\n    disabled: false,\n    dropOnEmpty: true,\n    handle: null,\n    helperClass: 'bg-body-tertiary',\n    items: ':scope > li',\n    scroll: true,\n    scrollSensitivity: 20,\n    scrollSpeed: 5,\n};\n\n// Sortable prototype\nconst proto = Sortable.prototype;\n\nproto._checkScroll = _checkScroll;\nproto._events = _events;\nproto._refreshCursors = _refreshCursors;\nproto._updateTarget = _updateTarget;\n\n// Sortable init\ninitComponent('sortable', Sortable);\n\nexport default Sortable;\n"],"names":["BaseComponent","getPosition","initComponent"],"mappings":"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"}

package/dist/frost-ui-sortable.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@fr0st/ui"),require("@fr0st/query")):"function"==typeof define&&define.amd?define(["exports","@fr0st/ui","@fr0st/query"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).UI=t.UI||{},t.UI,t.fQuery)}(this,(function(t,e,s){"use strict";class i extends e.BaseComponent{constructor(t,e){super(t,e),this._selector=this._options.items,this._options.handle&&(this._selector+=" "+this._options.handle),this._enabled=!this._options.disabled,this._refreshCursors(),this._events()}disable(){this._enabled=!1}dispose(){s.removeEventDelegate(this._node,"mousedown.ui.sortable touchstart.ui.sortable"),s.removeEvent(this._node,"receive.ui.sortable"),this._target=null,this._currentSortable=null,super.dispose()}enable(){this._enabled=!0}items(){return s.find(this._options.items,this._node)}}i.defaults={appendTo:"body",axis:null,cancel:"input, textarea, button, select, option",connectWith:null,cursor:"auto",disabled:!1,dropOnEmpty:!0,handle:null,helperClass:"bg-body-tertiary",items:":scope > li",scroll:!0,scrollSensitivity:20,scrollSpeed:5};const o=i.prototype;o._checkScroll=function(){s.hide(this._target);const t=s.getScrollX(window),e=s.getScrollY(window);let i=t,o=e;if(this._pos.y<e+this._options.scrollSensitivity)o=Math.max(0,e-this._options.scrollSpeed);else if(this._pos.y>e+s.height(window)-this._options.scrollSensitivity){const t=s.height(document,{boxSize:s.SCROLL_BOX});o=Math.min(t,e+this._options.scrollSpeed)}if(this._pos.x<t+this._options.scrollSensitivity)i=Math.max(0,t-this._options.scrollSpeed);else if(this._pos.x>t+s.width(window)-this._options.scrollSensitivity){const e=s.width(document,{boxSize:s.SCROLL_BOX});i=Math.min(e,t+this._options.scrollSpeed)}i===t&&o===e||(s.setStyle(":root",{scrollBehavior:"initial"}),s.setScroll(document,i,o),s.setStyle(":root",{scrollBehavior:""}),this._pos.x+=i-t,this._pos.y+=o-e),s.show(this._target),this._checkScrollTimer=setTimeout((t=>{this._checkScroll()}),0)},o._events=function(){const t=s.mouseDragFactory((t=>{if(t.button||!this._enabled||s.is(t.currentTarget,this._options.cancel)||s.getDataset(this._node,"uiDragging"))return!1;"mousedown"===t.type&&t.preventDefault(),this._target=this._options.handle?this.items().find((e=>s.hasDescendent(e,t.currentTarget))):t.currentTarget}),(t=>{this._pos=e.getPosition(t),s.getDataset(this._node,"uiDragging")||(s.setDataset(this._node,{uiDragging:!0}),this._startIndex=s.index(this._target),this._currentIndex=this._startIndex,s.triggerEvent(this._node,"sort.ui.sortable",{detail:{target:this._target}}),this._options.helperClass&&s.addClass(this._target,this._options.helperClass),this._currentSortable=this._node,this._options.scroll&&this._checkScroll());let i=this._node;if(this._options.connectWith){const t=s.find(this._options.connectWith).filter((t=>{const e=this.constructor.init(t);return e._options.dropOnEmpty||e.items().length}));t.length&&(i=s.nearestTo([this._node,...t],this._pos.x,this._pos.y,{offset:!0}))}const o=s.isSame(this._node,i)?this.items():this.constructor.init(i).items(),r=s.nearestTo(o,this._pos.x,this._pos.y,{offset:!0});if(!r)return;this._updateTarget(r,this._pos.x,this._pos.y);const n=s.index(this._target);s.isSame(i,this._currentSortable)?this._currentIndex!==n&&s.triggerEvent(i,"sorting.ui.sortable",{detail:{target:this._target}}):(s.triggerEvent(this._currentSortable,"send.ui.sortable",{detail:{target:this._target}}),s.triggerEvent(i,"receive.ui.sortable",{detail:{target:this._target}})),this._currentIndex=n,this._currentSortable=i}),(t=>{s.getDataset(this._node,"uiDragging")?("mouseup"===t.type&&t.preventDefault(),s.triggerEvent(this._currentSortable,"sorted.ui.sortable",{detail:{target:this._target}}),this._options.helperClass&&s.removeClass(this._target,this._options.helperClass),this._currentIndex===this._startIndex&&s.isSame(this._currentSortable,this._node)||s.triggerEvent(this._currentSortable,"update.ui.sortable",{detail:{target:this._target}}),s.removeDataset(this._node,"uiDragging"),this._checkScrollTimer&&(clearTimeout(this._checkScrollTimer),this._checkScrollTimer=null),this._target=null,this._currentSortable=null,this._currentIndex=null,this._startIndex=null):this._target=null}));s.addEventDelegate(this._node,"mousedown.ui.sortable touchstart.ui.sortable",this._selector,t),s.addEvent(this._node,"receive.ui.sortable",(t=>{this._refreshCursors()}))},o._refreshCursors=function(){const t=s.find(this._selector,this._node);s.setStyle(t,{cursor:this._options.cursor})},o._updateTarget=function(t,e,i){const o=s.center(t,{offset:!0}),r=s.center(this._target,{offset:!0});let n;n="y"===this._options.axis||o.x===r.x?i<o.y?"before":"after":"x"===this._options.axis||o.y===r.y?e<o.x?"before":"after":e<o.x&&i<o.y?"before":"after",s[n](t,this._target)},e.initComponent("sortable",i),t.Sortable=i}));

package/dist/frost-ui-sortable.min.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Sortable","BaseComponent","constructor","node","options","super","this","_selector","_options","items","handle","_enabled","disabled","_refreshCursors","_events","disable","dispose","$","removeEventDelegate","_node","removeEvent","_target","_currentSortable","enable","find","defaults","appendTo","axis","cancel","connectWith","cursor","dropOnEmpty","helperClass","scroll","scrollSensitivity","scrollSpeed","proto","prototype","_checkScroll","hide","originalX","getScrollX","window","originalY","getScrollY","offsetX","offsetY","_pos","y","Math","max","height","docHeight","document","boxSize","SCROLL_BOX","min","x","width","docWidth","setStyle","scrollBehavior","setScroll","show","_checkScrollTimer","setTimeout","_","dragEvent","mouseDragFactory","e","button","is","currentTarget","getDataset","type","preventDefault","hasDescendent","getPosition","setDataset","uiDragging","_startIndex","index","_currentIndex","triggerEvent","detail","target","addClass","nearestSortable","connected","filter","sortable","init","length","nearestTo","offset","nearestItems","isSame","nearestItem","_updateTarget","newIndex","removeClass","removeDataset","clearTimeout","addEventDelegate","addEvent","elements","nearestCenter","center","targetCenter","method","initComponent"],"sources":["../src/sortable.js","../src/index.js","../src/prototype/helpers.js","../src/prototype/events.js"],"sourcesContent":["import $ from '@fr0st/query';\nimport { BaseComponent } from '@fr0st/ui';\n\n/**\n * Sortable Class\n * @class\n */\nexport default class Sortable extends BaseComponent {\n    /**\n     * New Sortable constructor.\n     * @param {HTMLElement} node The input node.\n     * @param {object} [options] The options to create the Sortable with.\n     */\n    constructor(node, options) {\n        super(node, options);\n\n        this._selector = this._options.items;\n        if (this._options.handle) {\n            this._selector += ' ' + this._options.handle;\n        }\n\n        this._enabled = !this._options.disabled;\n\n        this._refreshCursors();\n        this._events();\n    }\n\n    /**\n     * Disable the Sortable.\n     */\n    disable() {\n        this._enabled = false;\n    }\n\n    /**\n     * Dispose the Sortable.\n     */\n    dispose() {\n        $.removeEventDelegate(this._node, 'mousedown.ui.sortable touchstart.ui.sortable');\n        $.removeEvent(this._node, 'receive.ui.sortable');\n\n        this._target = null;\n        this._currentSortable = null;\n\n        super.dispose();\n    }\n\n    /**\n     * Enable the Sortable.\n     */\n    enable() {\n        this._enabled = true;\n    }\n\n    /**\n     * Get the Sortable item elements.\n     * @return {array} The Sortable item elements.\n     */\n    items() {\n        return $.find(this._options.items, this._node);\n    }\n}\n","import { initComponent } from '@fr0st/ui';\nimport Sortable from './sortable.js';\nimport { _events } from './prototype/events.js';\nimport { _checkScroll, _refreshCursors, _updateTarget } from './prototype/helpers.js';\n\n// Sortable default options\nSortable.defaults = {\n    appendTo: 'body',\n    axis: null,\n    cancel: 'input, textarea, button, select, option',\n    connectWith: null,\n    cursor: 'auto',\n    disabled: false,\n    dropOnEmpty: true,\n    handle: null,\n    helperClass: 'bg-body-tertiary',\n    items: ':scope > li',\n    scroll: true,\n    scrollSensitivity: 20,\n    scrollSpeed: 5,\n};\n\n// Sortable prototype\nconst proto = Sortable.prototype;\n\nproto._checkScroll = _checkScroll;\nproto._events = _events;\nproto._refreshCursors = _refreshCursors;\nproto._updateTarget = _updateTarget;\n\n// Sortable init\ninitComponent('sortable', Sortable);\n\nexport default Sortable;\n","import $ from '@fr0st/query';\n\n/**\n * Check for window scroll.\n */\nexport function _checkScroll() {\n    $.hide(this._target);\n\n    const originalX = $.getScrollX(window);\n    const originalY = $.getScrollY(window);\n\n    let offsetX = originalX;\n    let offsetY = originalY;\n\n    if (this._pos.y < originalY + this._options.scrollSensitivity) {\n        offsetY = Math.max(0, originalY - this._options.scrollSpeed);\n    } else if (this._pos.y > originalY + $.height(window) - this._options.scrollSensitivity) {\n        const docHeight = $.height(document, { boxSize: $.SCROLL_BOX });\n        offsetY = Math.min(docHeight, originalY + this._options.scrollSpeed);\n    }\n\n    if (this._pos.x < originalX + this._options.scrollSensitivity) {\n        offsetX = Math.max(0, originalX - this._options.scrollSpeed);\n    } else if (this._pos.x > originalX + $.width(window) - this._options.scrollSensitivity) {\n        const docWidth = $.width(document, { boxSize: $.SCROLL_BOX });\n        offsetX = Math.min(docWidth, originalX + this._options.scrollSpeed);\n    }\n\n    if (offsetX !== originalX || offsetY !== originalY) {\n        $.setStyle(':root', { scrollBehavior: 'initial' });\n        $.setScroll(document, offsetX, offsetY);\n        $.setStyle(':root', { scrollBehavior: '' });\n\n        this._pos.x += offsetX - originalX;\n        this._pos.y += offsetY - originalY;\n    }\n\n    $.show(this._target);\n\n    this._checkScrollTimer = setTimeout((_) => {\n        this._checkScroll();\n    }, 0);\n};\n\n/**\n * Refresh Sortable item cursors.\n */\nexport function _refreshCursors() {\n    const elements = $.find(this._selector, this._node);\n\n    $.setStyle(elements, { cursor: this._options.cursor });\n};\n\n/**\n * Update the target element.\n * @param {HTMLElement} nearestItem The current nearest item.\n * @param {number} x The mouse X position.\n * @param {number} y The mouse Y position.\n */\nexport function _updateTarget(nearestItem, x, y) {\n    const nearestCenter = $.center(nearestItem, { offset: true });\n    const targetCenter = $.center(this._target, { offset: true });\n\n    let method;\n    if (this._options.axis === 'y' || nearestCenter.x === targetCenter.x) {\n        method = y < nearestCenter.y ?\n            'before' :\n            'after';\n    } else if (this._options.axis === 'x' || nearestCenter.y === targetCenter.y) {\n        method = x < nearestCenter.x ?\n            'before' :\n            'after';\n    } else {\n        method = x < nearestCenter.x && y < nearestCenter.y ?\n            'before' :\n            'after';\n    }\n\n    $[method](nearestItem, this._target);\n};\n","import $ from '@fr0st/query';\nimport { getPosition } from '@fr0st/ui';\n\n/**\n * Attach events for the Sortable.\n */\nexport function _events() {\n    const downEvent = (e) => {\n        if (\n            e.button ||\n            !this._enabled ||\n            $.is(e.currentTarget, this._options.cancel) ||\n            $.getDataset(this._node, 'uiDragging')\n        ) {\n            return false;\n        }\n\n        if (e.type === 'mousedown') {\n            e.preventDefault();\n        }\n\n        this._target = this._options.handle ?\n            this.items().find((node) => $.hasDescendent(node, e.currentTarget)) :\n            e.currentTarget;\n    };\n\n    const moveEvent = (e) => {\n        this._pos = getPosition(e);\n\n        if (!$.getDataset(this._node, 'uiDragging')) {\n            $.setDataset(this._node, { uiDragging: true });\n\n            this._startIndex = $.index(this._target);\n            this._currentIndex = this._startIndex;\n\n            $.triggerEvent(this._node, 'sort.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n\n            if (this._options.helperClass) {\n                $.addClass(this._target, this._options.helperClass);\n            }\n\n            this._currentSortable = this._node;\n\n            if (this._options.scroll) {\n                this._checkScroll();\n            }\n        }\n\n        let nearestSortable = this._node;\n\n        if (this._options.connectWith) {\n            const connected = $.find(this._options.connectWith)\n                .filter((node) => {\n                    const sortable = this.constructor.init(node);\n\n                    return sortable._options.dropOnEmpty || sortable.items().length;\n                });\n\n            if (connected.length) {\n                nearestSortable = $.nearestTo([this._node, ...connected], this._pos.x, this._pos.y, { offset: true });\n            }\n        }\n\n        const nearestItems = $.isSame(this._node, nearestSortable) ?\n            this.items() :\n            this.constructor.init(nearestSortable).items();\n\n        const nearestItem = $.nearestTo(nearestItems, this._pos.x, this._pos.y, { offset: true });\n\n        if (!nearestItem) {\n            return;\n        }\n\n        this._updateTarget(nearestItem, this._pos.x, this._pos.y);\n\n        const newIndex = $.index(this._target);\n\n        if (!$.isSame(nearestSortable, this._currentSortable)) {\n            $.triggerEvent(this._currentSortable, 'send.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n\n            $.triggerEvent(nearestSortable, 'receive.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n        } else if (this._currentIndex !== newIndex) {\n            $.triggerEvent(nearestSortable, 'sorting.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n        }\n\n        this._currentIndex = newIndex;\n        this._currentSortable = nearestSortable;\n    };\n\n    const upEvent = (e) => {\n        if (!$.getDataset(this._node, 'uiDragging')) {\n            this._target = null;\n            return;\n        }\n\n        if (e.type === 'mouseup') {\n            e.preventDefault();\n        }\n\n        $.triggerEvent(this._currentSortable, 'sorted.ui.sortable', {\n            detail: {\n                target: this._target,\n            },\n        });\n\n        if (this._options.helperClass) {\n            $.removeClass(this._target, this._options.helperClass);\n        }\n\n        if (this._currentIndex !== this._startIndex || !$.isSame(this._currentSortable, this._node)) {\n            $.triggerEvent(this._currentSortable, 'update.ui.sortable', {\n                detail: {\n                    target: this._target,\n                },\n            });\n        }\n\n        $.removeDataset(this._node, 'uiDragging');\n\n        if (this._checkScrollTimer) {\n            clearTimeout(this._checkScrollTimer);\n            this._checkScrollTimer = null;\n        }\n\n        this._target = null;\n        this._currentSortable = null;\n        this._currentIndex = null;\n        this._startIndex = null;\n    };\n\n    const dragEvent = $.mouseDragFactory(downEvent, moveEvent, upEvent);\n\n    $.addEventDelegate(this._node, 'mousedown.ui.sortable touchstart.ui.sortable', this._selector, dragEvent);\n\n    $.addEvent(this._node, 'receive.ui.sortable', (_) => {\n        this._refreshCursors();\n    });\n};\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@fr0st/ui-sortable",
+    "version": "2.0.0",
+    "description": "FrostUI-Sortable is a free, open-source Sortable component for Javascript.",
+    "keywords": [
+        "ui",
+        "component",
+        "sortable",
+        "front-end",
+        "web"
+    ],
+    "homepage": "https://github.com/elusivecodes/FrostUI-Sortable",
+    "bugs": {
+        "url": "https://github.com/elusivecodes/FrostUI-Sortable/issues",
+        "email": "elusivecodes@gmail.com"
+    },
+    "main": "src/index.js",
+    "type": "module",
+    "files": [
+        "dist",
+        "/LICENSE",
+        "/README.md",
+        "src"
+    ],
+    "scripts": {
+        "build": "npm run js-compile && npm run js-minify",
+        "js-compile": "rollup --config",
+        "js-lint": "eslint --ext .js .",
+        "js-minify": "terser --compress passes=2 --mangle --source-map \"content=dist/frost-ui-sortable.js.map\" --output dist/frost-ui-sortable.min.js dist/frost-ui-sortable.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/elusivecodes/FrostUI-Sortable.git"
+    },
+    "author": "Elusive",
+    "license": "MIT",
+    "devDependencies": {
+        "@rollup/plugin-node-resolve": "^15.0.2",
+        "eslint": "^8.41.0",
+        "eslint-config-google": "^0.14.0",
+        "rollup": "^3.23.0",
+        "terser": "^5.17.6"
+    }
+}

package/src/index.js

@@ -0,0 +1,34 @@
+import { initComponent } from '@fr0st/ui';
+import Sortable from './sortable.js';
+import { _events } from './prototype/events.js';
+import { _checkScroll, _refreshCursors, _updateTarget } from './prototype/helpers.js';
+
+// Sortable default options
+Sortable.defaults = {
+    appendTo: 'body',
+    axis: null,
+    cancel: 'input, textarea, button, select, option',
+    connectWith: null,
+    cursor: 'auto',
+    disabled: false,
+    dropOnEmpty: true,
+    handle: null,
+    helperClass: 'bg-body-tertiary',
+    items: ':scope > li',
+    scroll: true,
+    scrollSensitivity: 20,
+    scrollSpeed: 5,
+};
+
+// Sortable prototype
+const proto = Sortable.prototype;
+
+proto._checkScroll = _checkScroll;
+proto._events = _events;
+proto._refreshCursors = _refreshCursors;
+proto._updateTarget = _updateTarget;
+
+// Sortable init
+initComponent('sortable', Sortable);
+
+export default Sortable;

package/src/prototype/events.js

@@ -0,0 +1,154 @@
+import $ from '@fr0st/query';
+import { getPosition } from '@fr0st/ui';
+
+/**
+ * Attach events for the Sortable.
+ */
+export function _events() {
+    const downEvent = (e) => {
+        if (
+            e.button ||
+            !this._enabled ||
+            $.is(e.currentTarget, this._options.cancel) ||
+            $.getDataset(this._node, 'uiDragging')
+        ) {
+            return false;
+        }
+
+        if (e.type === 'mousedown') {
+            e.preventDefault();
+        }
+
+        this._target = this._options.handle ?
+            this.items().find((node) => $.hasDescendent(node, e.currentTarget)) :
+            e.currentTarget;
+    };
+
+    const moveEvent = (e) => {
+        this._pos = getPosition(e);
+
+        if (!$.getDataset(this._node, 'uiDragging')) {
+            $.setDataset(this._node, { uiDragging: true });
+
+            this._startIndex = $.index(this._target);
+            this._currentIndex = this._startIndex;
+
+            $.triggerEvent(this._node, 'sort.ui.sortable', {
+                detail: {
+                    target: this._target,
+                },
+            });
+
+            if (this._options.helperClass) {
+                $.addClass(this._target, this._options.helperClass);
+            }
+
+            this._currentSortable = this._node;
+
+            if (this._options.scroll) {
+                this._checkScroll();
+            }
+        }
+
+        let nearestSortable = this._node;
+
+        if (this._options.connectWith) {
+            const connected = $.find(this._options.connectWith)
+                .filter((node) => {
+                    const sortable = this.constructor.init(node);
+
+                    return sortable._options.dropOnEmpty || sortable.items().length;
+                });
+
+            if (connected.length) {
+                nearestSortable = $.nearestTo([this._node, ...connected], this._pos.x, this._pos.y, { offset: true });
+            }
+        }
+
+        const nearestItems = $.isSame(this._node, nearestSortable) ?
+            this.items() :
+            this.constructor.init(nearestSortable).items();
+
+        const nearestItem = $.nearestTo(nearestItems, this._pos.x, this._pos.y, { offset: true });
+
+        if (!nearestItem) {
+            return;
+        }
+
+        this._updateTarget(nearestItem, this._pos.x, this._pos.y);
+
+        const newIndex = $.index(this._target);
+
+        if (!$.isSame(nearestSortable, this._currentSortable)) {
+            $.triggerEvent(this._currentSortable, 'send.ui.sortable', {
+                detail: {
+                    target: this._target,
+                },
+            });
+
+            $.triggerEvent(nearestSortable, 'receive.ui.sortable', {
+                detail: {
+                    target: this._target,
+                },
+            });
+        } else if (this._currentIndex !== newIndex) {
+            $.triggerEvent(nearestSortable, 'sorting.ui.sortable', {
+                detail: {
+                    target: this._target,
+                },
+            });
+        }
+
+        this._currentIndex = newIndex;
+        this._currentSortable = nearestSortable;
+    };
+
+    const upEvent = (e) => {
+        if (!$.getDataset(this._node, 'uiDragging')) {
+            this._target = null;
+            return;
+        }
+
+        if (e.type === 'mouseup') {
+            e.preventDefault();
+        }
+
+        $.triggerEvent(this._currentSortable, 'sorted.ui.sortable', {
+            detail: {
+                target: this._target,
+            },
+        });
+
+        if (this._options.helperClass) {
+            $.removeClass(this._target, this._options.helperClass);
+        }
+
+        if (this._currentIndex !== this._startIndex || !$.isSame(this._currentSortable, this._node)) {
+            $.triggerEvent(this._currentSortable, 'update.ui.sortable', {
+                detail: {
+                    target: this._target,
+                },
+            });
+        }
+
+        $.removeDataset(this._node, 'uiDragging');
+
+        if (this._checkScrollTimer) {
+            clearTimeout(this._checkScrollTimer);
+            this._checkScrollTimer = null;
+        }
+
+        this._target = null;
+        this._currentSortable = null;
+        this._currentIndex = null;
+        this._startIndex = null;
+    };
+
+    const dragEvent = $.mouseDragFactory(downEvent, moveEvent, upEvent);
+
+    $.addEventDelegate(this._node, 'mousedown.ui.sortable touchstart.ui.sortable', this._selector, dragEvent);
+
+    $.addEvent(this._node, 'receive.ui.sortable', (_) => {
+        this._refreshCursors();
+    });
+};

package/src/prototype/helpers.js

@@ -0,0 +1,80 @@
+import $ from '@fr0st/query';
+
+/**
+ * Check for window scroll.
+ */
+export function _checkScroll() {
+    $.hide(this._target);
+
+    const originalX = $.getScrollX(window);
+    const originalY = $.getScrollY(window);
+
+    let offsetX = originalX;
+    let offsetY = originalY;
+
+    if (this._pos.y < originalY + this._options.scrollSensitivity) {
+        offsetY = Math.max(0, originalY - this._options.scrollSpeed);
+    } else if (this._pos.y > originalY + $.height(window) - this._options.scrollSensitivity) {
+        const docHeight = $.height(document, { boxSize: $.SCROLL_BOX });
+        offsetY = Math.min(docHeight, originalY + this._options.scrollSpeed);
+    }
+
+    if (this._pos.x < originalX + this._options.scrollSensitivity) {
+        offsetX = Math.max(0, originalX - this._options.scrollSpeed);
+    } else if (this._pos.x > originalX + $.width(window) - this._options.scrollSensitivity) {
+        const docWidth = $.width(document, { boxSize: $.SCROLL_BOX });
+        offsetX = Math.min(docWidth, originalX + this._options.scrollSpeed);
+    }
+
+    if (offsetX !== originalX || offsetY !== originalY) {
+        $.setStyle(':root', { scrollBehavior: 'initial' });
+        $.setScroll(document, offsetX, offsetY);
+        $.setStyle(':root', { scrollBehavior: '' });
+
+        this._pos.x += offsetX - originalX;
+        this._pos.y += offsetY - originalY;
+    }
+
+    $.show(this._target);
+
+    this._checkScrollTimer = setTimeout((_) => {
+        this._checkScroll();
+    }, 0);
+};
+
+/**
+ * Refresh Sortable item cursors.
+ */
+export function _refreshCursors() {
+    const elements = $.find(this._selector, this._node);
+
+    $.setStyle(elements, { cursor: this._options.cursor });
+};
+
+/**
+ * Update the target element.
+ * @param {HTMLElement} nearestItem The current nearest item.
+ * @param {number} x The mouse X position.
+ * @param {number} y The mouse Y position.
+ */
+export function _updateTarget(nearestItem, x, y) {
+    const nearestCenter = $.center(nearestItem, { offset: true });
+    const targetCenter = $.center(this._target, { offset: true });
+
+    let method;
+    if (this._options.axis === 'y' || nearestCenter.x === targetCenter.x) {
+        method = y < nearestCenter.y ?
+            'before' :
+            'after';
+    } else if (this._options.axis === 'x' || nearestCenter.y === targetCenter.y) {
+        method = x < nearestCenter.x ?
+            'before' :
+            'after';
+    } else {
+        method = x < nearestCenter.x && y < nearestCenter.y ?
+            'before' :
+            'after';
+    }
+
+    $[method](nearestItem, this._target);
+};

package/src/sortable.js

@@ -0,0 +1,62 @@
+import $ from '@fr0st/query';
+import { BaseComponent } from '@fr0st/ui';
+
+/**
+ * Sortable Class
+ * @class
+ */
+export default class Sortable extends BaseComponent {
+    /**
+     * New Sortable constructor.
+     * @param {HTMLElement} node The input node.
+     * @param {object} [options] The options to create the Sortable with.
+     */
+    constructor(node, options) {
+        super(node, options);
+
+        this._selector = this._options.items;
+        if (this._options.handle) {
+            this._selector += ' ' + this._options.handle;
+        }
+
+        this._enabled = !this._options.disabled;
+
+        this._refreshCursors();
+        this._events();
+    }
+
+    /**
+     * Disable the Sortable.
+     */
+    disable() {
+        this._enabled = false;
+    }
+
+    /**
+     * Dispose the Sortable.
+     */
+    dispose() {
+        $.removeEventDelegate(this._node, 'mousedown.ui.sortable touchstart.ui.sortable');
+        $.removeEvent(this._node, 'receive.ui.sortable');
+
+        this._target = null;
+        this._currentSortable = null;
+
+        super.dispose();
+    }
+
+    /**
+     * Enable the Sortable.
+     */
+    enable() {
+        this._enabled = true;
+    }
+
+    /**
+     * Get the Sortable item elements.
+     * @return {array} The Sortable item elements.
+     */
+    items() {
+        return $.find(this._options.items, this._node);
+    }
+}

package/src/wrapper.js

@@ -0,0 +1,3 @@
+import Sortable from './index.js';
+
+export { Sortable };