New implementation without a third-party lib.

package-lock.json

@@ -1,56 +1,67 @@
 {
   "name": "@tp/tp-sortable",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@tp/tp-sortable",
-      "version": "0.0.1",
+      "version": "2.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "lit": "^2.2.0",
+        "@tp/helpers": "^2.2.0",
+        "lit": "^2.8.0",
         "sortablejs": "^1.15.0"
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+    },
     "node_modules/@lit/reactive-element": {
-      "version": "1.3.1",
+      "version": "1.6.3",
-      "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
-      "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
-      "license": "BSD-3-Clause"
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "node_modules/@tp/helpers": {
+      "version": "2.2.0",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/2.2.0/helpers-2.2.0.tgz",
+      "integrity": "sha512-kf+ieedMdYZOnQ6xUUQxTlP8cQEp4obpSs3vI7V/3xnex7VvMbiWzgFHU+wr1D2eR/IA0Cl1cZxvJ3E052EQew==",
+      "license": "Apache-2.0"
     },
     "node_modules/@types/trusted-types": {
-      "version": "2.0.2",
+      "version": "2.0.7",
-      "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
-      "license": "MIT"
     },
     "node_modules/lit": {
-      "version": "2.2.1",
+      "version": "2.8.0",
-      "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
-      "integrity": "sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw==",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
-      "license": "BSD-3-Clause",
       "dependencies": {
-        "@lit/reactive-element": "^1.3.0",
+        "@lit/reactive-element": "^1.6.0",
-        "lit-element": "^3.2.0",
+        "lit-element": "^3.3.0",
-        "lit-html": "^2.2.0"
+        "lit-html": "^2.8.0"
       }
     },
     "node_modules/lit-element": {
-      "version": "3.2.0",
+      "version": "3.3.3",
-      "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
-      "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
-      "license": "BSD-3-Clause",
       "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
         "@lit/reactive-element": "^1.3.0",
-        "lit-html": "^2.2.0"
+        "lit-html": "^2.8.0"
       }
     },
     "node_modules/lit-html": {
-      "version": "2.2.1",
+      "version": "2.8.0",
-      "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
-      "integrity": "sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g==",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
-      "license": "BSD-3-Clause",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
@@ -63,39 +74,53 @@
     }
   },
   "dependencies": {
+    "@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+    },
     "@lit/reactive-element": {
-      "version": "1.3.1",
+      "version": "1.6.3",
-      "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
-      "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw=="
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "requires": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "@tp/helpers": {
+      "version": "2.2.0",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/2.2.0/helpers-2.2.0.tgz",
+      "integrity": "sha512-kf+ieedMdYZOnQ6xUUQxTlP8cQEp4obpSs3vI7V/3xnex7VvMbiWzgFHU+wr1D2eR/IA0Cl1cZxvJ3E052EQew=="
     },
     "@types/trusted-types": {
-      "version": "2.0.2",
+      "version": "2.0.7",
-      "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
     "lit": {
-      "version": "2.2.1",
+      "version": "2.8.0",
-      "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
-      "integrity": "sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw==",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
       "requires": {
-        "@lit/reactive-element": "^1.3.0",
+        "@lit/reactive-element": "^1.6.0",
-        "lit-element": "^3.2.0",
+        "lit-element": "^3.3.0",
-        "lit-html": "^2.2.0"
+        "lit-html": "^2.8.0"
       }
     },
     "lit-element": {
-      "version": "3.2.0",
+      "version": "3.3.3",
-      "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
-      "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
       "requires": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
         "@lit/reactive-element": "^1.3.0",
-        "lit-html": "^2.2.0"
+        "lit-html": "^2.8.0"
       }
     },
     "lit-html": {
-      "version": "2.2.1",
+      "version": "2.8.0",
-      "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
-      "integrity": "sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g==",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
       "requires": {
         "@types/trusted-types": "^2.0.2"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-sortable",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "",
   "main": "tp-sortable.js",
   "scripts": {
@@ -13,6 +13,7 @@
   "author": "trading_peter",
   "license": "Apache-2.0",
   "dependencies": {
+    "@tp/helpers": "^2.2.0",
     "lit": "^2.8.0",
     "sortablejs": "^1.15.0"
   }

tp-sortable.js

@@ -1,18 +1,23 @@
 /**
 @license
-Copyright (c) 2022 trading_peter
+Copyright (c) 2024 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';
+import { EventHelpers } from '@tp/helpers/event-helpers.js';
+import { closest } from '@tp/helpers/closest.js';
 
-class TpSortable extends LitElement {
+class TpSortable extends EventHelpers(LitElement) {
   static get styles() {
     return [
       css`
         :host {
           display: block;
+
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
           user-select: none;
         }
       `
@@ -21,7 +26,7 @@ class TpSortable extends LitElement {
 
   render() {
     return html`
-      <slot name="list"></slot>
+      <slot></slot>
     `;
   }
 
@@ -36,6 +41,8 @@ class TpSortable extends LitElement {
 
       sorting: { type: Boolean, reflect: true },
 
+      tracking: { type: Boolean },
+
       _sortables: { type: Array }
     };
   }
@@ -46,19 +53,211 @@ class TpSortable extends LitElement {
     this.handle = null;
     this.longPress = false;
     this.sorting = false;
+    this.tracking = false;
     this._sortables = [];
   }
 
   firstUpdated() {
-    this.sortable = Sortable.create(this.querySelector('[slot="list"]'), {
+    this.listen(this, 'track', '_onTrack');
-      animation: 150,
+    this.listen(this, 'mousedown', '_onMouseDown');
-      draggable: this.selector,
+  }
-      handle: this.handle,
+
-      onSort: e => {
+  _onTrack(e) {
-        this.dispatchEvent(new CustomEvent('sorting-changed', { detail: e, bubbles: true, composed: true }));
+    switch (e.detail.state) {
-      }
+      case 'track':
+        if (!this.sorting && this._longPressJob !== false && (Math.abs(e.detail.dy) > 10 || Math.abs(e.detail.dx) > 10)) {
+          this._cancelLongPress();
+          return;
+        }
+
+        if (this.sorting) {
+          this._dy = e.detail.dy;
+          this._direction = this._dy < 0 ? 1 : -1;
+          this._translate3d('0px', this._dy + 'px', '0px', this._target);
+          this._moveSiblings();
+        }
+        break;
+      case 'end':
+        if (this.sorting) {
+          const result = this._calcOverlap();
+          this._target.style.zIndex = '';
+          this._target.removeAttribute('is-dragged');
+          this._dy = 0;
+          this._translate3d('0px', '0px', '0px', this._target);
+          this._resetSortables();
+          this.sorting = false;
+          this.dispatchEvent(new CustomEvent('items-rearranged', { detail: result, bubbles: true, composed: true }));
+        }
+        break;
+    }
+  }
+
+  _onMouseDown(e) {
+    this._longPressTarget = closest(e.composedPath()[0], this.handle || this.selector, true);
+    if (this._longPressTarget) {
+      this._startX = e.detail.x;
+      this._startY = e.detail.y;
+      const path = e.composedPath();
+
+      this._longPressJob = setTimeout(() => {
+        this._setTouchAction(this, 'none');
+        this._setupTarget(path);
+        this._longPressTarget.setAttribute('long-pressed', '');
+      }, this.longPress ? 200 : 0);
+    }
+  }
+
+  onMouseUp() {
+    this._cancelLongPress();
+    setTimeout(() => {
+      this.sorting = false;
     });
   }
+
+  _setupTarget(path) {
+    this._target = closest(path[0], this.selector, true);
+    if (this._target) {
+      this._target.setAttribute('is-dragged', '');
+      this._rect = this._target.getBoundingClientRect();
+      this._registerSortableElements();
+      this.sorting = true;
+      this._translate3d('0px', this._dy + 'px', '0px', this._target);
+    }
+  }
+
+  _cancelLongPress() {
+    clearTimeout(this._longPressJob);
+    this._longPressJob = false;
+    if (this._longPressTarget) {
+      this._longPressTarget.removeAttribute('long-pressed');
+    }
+    this._setTouchAction(this, 'auto');
+  }
+
+  _moveSiblings() {
+    const targetTop = this._rect.top + this._dy;
+    const targetHeight = this._rect.height;
+
+    const isTrackingDown = () => this._dy > 0;
+    const itemsBeforeTarget = () => {
+      const idx = this._sortables.findIndex(item => item.el === this._target);
+      return this._sortables.slice(0, idx);
+    }
+
+    const itemsAfterTarget = () => {
+      const idx = this._sortables.findIndex(item => item.el === this._target);
+      return this._sortables.slice(idx + 1);
+    }
+
+    if (isTrackingDown()) {
+      const items = itemsAfterTarget();
+
+      for (let i = 0, li = items.length; i < li; ++i) {
+        const item = items[i];
+        if (item.el !== this._target) {
+
+          if (targetTop + targetHeight > item.rect.top + (item.rect.height * 0.5)) {
+            this._translate3d('0px', -targetHeight + 'px', '0px', item.el);
+          }
+
+          if (targetTop + targetHeight < item.rect.top + (item.rect.height * 0.5)) {
+            this._translate3d('0px', '0px', '0px', item.el);
+          }
+        }
+      }
+    } else {
+      const items = itemsBeforeTarget();
+
+      for (let i = 0, li = items.length; i < li; ++i) {
+        const item = items[i];
+        if (item.el !== this._target) {
+          if (targetTop - (item.rect.height * 0.5) > item.rect.top) {
+            this._translate3d('0px', '0px', '0px', item.el);
+          }
+
+          if (targetTop - (item.rect.height * 0.5) < item.rect.top) {
+            this._translate3d('0px', targetHeight + 'px', '0px', item.el);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Finds the next nearest sibling and returns the distance.
+   * @return {Object} Distance and item of the next nearest sibling.
+   */
+  _calcOverlap() {
+    let oldIndex = 0;
+
+    const list = [];
+    for (let i = 0, li = this._sortables.length; i < li; ++i) {
+      if (this._sortables[i].el === this._target) {
+        oldIndex = i;
+      }
+
+      if (this._sortables[i].el !== undefined) {
+        list.push({ top: parseInt(this._sortables[i].el.getBoundingClientRect().top, 10), el: this._sortables[i].el });
+      }
+    }
+
+    list.sort((a, b) => {
+      return a.top - b.top;
+    });
+
+    const newOrder = list.map(item => item.el);
+    const targetIdx = newOrder.findIndex(el => el === this._target);
+
+    return {
+      oldIndex: oldIndex,
+      newIndex: targetIdx,
+      newOrder: newOrder,
+      siblingBefore: targetIdx > 0 ? newOrder[targetIdx - 1] : null,
+      siblingAfter: targetIdx < newOrder.length - 1 ? newOrder[targetIdx + 1] : null,
+      target: this._target
+    };
+  }
+
+  _registerSortableElements() {
+    this._sortables = [];
+    let sortables = Array.from(this.querySelectorAll(this.selector));
+
+    for (let i = 0, li = sortables.length; i < li; ++i) {
+      const el = sortables[i];
+      el.style.position = el.style.position || 'relative';
+      el.style.transition = 'transform 300ms ease-in-out';
+      el.style.zIndex = '0';
+      this._sortables.push({
+        el: el,
+        rect: el.getBoundingClientRect()
+      });
+    }
+
+    this._target.style.zIndex = '9999';
+    this._target.style.transition = '';
+  }
+
+  _resetSortables() {
+    for (var i = 0, li = this._sortables.length; i < li; ++i) {
+      var item = this._sortables[i];
+      item.el.style.transition = '';
+      item.el.style.transform = '';
+      item.el.style.zIndex = '';
+    }
+
+    this._target = null;
+  }
+
+  _translate3d(x, y, z, node) {
+    node = (node || this);
+    const transformText = 'translate3d(' + x + ',' + y + ',' + z + ')';
+    node.style.webkitTransform = transformText;
+    node.style.transform = transformText;
+  }
+
+  _setTouchAction(node, value) {
+    node.style.touchAction = value;
+  }
 }
 
 window.customElements.define('tp-sortable', TpSortable);