Initial version.

tp-sortable.js

@@ -0,0 +1,62 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+import Sortable from 'sortablejs/modular/sortable.core.esm.js';
+
+class TpSortable extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          user-select: none;
+        }
+      `
+    ];
+  }
+
+  render() {
+    return html`
+      <slot name="list"></slot>
+    `;
+  }
+
+  static get properties() {
+    return {
+      selector: { type: String },
+
+      handle: { type: String },
+
+      // Use long press gesture to activate dragging.
+      longPress: { type: Boolean },
+
+      sorting: { type: Boolean, reflect: true },
+
+      _sortables: { type: Array }
+    };
+  }
+
+  constructor() {
+    super();
+    this.selector = 'div';
+    this.handle = null;
+    this.longPress = false;
+    this.sorting = false;
+    this._sortables = [];
+  }
+
+  firstUpdated() {
+    this.sortable = Sortable.create(this.querySelector('[slot="list"]'), {
+      animation: 150,
+      onSort: e => {
+        this.dispatchEvent(new CustomEvent('sorting-changed', { detail: e, bubbles: true, composed: true }));
+      }
+    });
+  }
+}
+
+window.customElements.define('tp-sortable', TpSortable);