Init sortable library

core/js/src/sortable.js

@@ -0,0 +1,25 @@
+// SortableJS plugin
+// Initializes Sortable on elements marked with [data-sortable]
+// Allows options via JSON in data attribute: data-sortable='{"animation":150}'
+
+const sortableElements = document.querySelectorAll('[data-sortable]');
+
+if (sortableElements.length) {
+  sortableElements.forEach(function (element) {
+    let options = {};
+
+    try {
+      const rawOptions = element.getAttribute('data-sortable');
+      options = rawOptions ? JSON.parse(rawOptions) : {};
+    } catch (e) {
+      // ignore invalid JSON
+    }
+
+    if (window.Sortable) {
+      // eslint-disable-next-line no-new
+      new window.Sortable(element, options);
+    }
+  });
+}
+
+

core/js/tabler.js

@@ -7,6 +7,7 @@ import "./src/popover"
 import "./src/switch-icon"
 import "./src/tab"
 import "./src/toast"
+import "./src/sortable"
 
 export * as bootstrap from "bootstrap"
 export * as tabler from "./src/tabler"

core/libs.json

@@ -38,6 +38,12 @@
       "dist/list.min.js"
     ]
   },
+  "sortablejs": {
+    "npm": "sortablejs",
+    "js": [
+      "Sortable.min.js"
+    ]
+  },
   "masonry": {
     "js": [
       "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"

core/package.json

@@ -168,6 +168,7 @@
     "nouislider": "^15.8.1",
     "plyr": "^3.7.8",
     "signature_pad": "^5.0.10",
+    "sortablejs": "^1.15.0",
     "star-rating.js": "^4.3.1",
     "tom-select": "^2.4.3",
     "typed.js": "^2.1.0"

pnpm-lock.yaml

@@ -166,6 +166,9 @@ importers:
       signature_pad:
         specifier: ^5.0.10
         version: 5.0.10
+      sortablejs:
+        specifier: ^1.15.0
+        version: 1.15.6
       star-rating.js:
         specifier: ^4.3.1
         version: 4.3.1
@@ -2770,6 +2773,9 @@ packages:
     resolution: {integrity: sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==}
     engines: {node: '>=8.0.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
+
   [email protected]:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -5851,6 +5857,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:

preview/pages/sortable.html

@@ -0,0 +1,53 @@
+---
+title: Sortable
+page-header: SortableJS
+page-menu: plugins.sortable
+page-libs: [sortablejs]
+layout: default
+permalink: sortable.html
+---
+
+<div class="row row-cards">
+  <div class="col-md-6">
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">Podstawowe użycie</h3>
+      </div>
+      <div class="card-body">
+        <ul class="list-group" data-sortable='{"animation":150}'>
+          <li class="list-group-item">Element A</li>
+          <li class="list-group-item">Element B</li>
+          <li class="list-group-item">Element C</li>
+          <li class="list-group-item">Element D</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">Dwie listy z przenoszeniem</h3>
+      </div>
+      <div class="card-body">
+        <div class="row g-3">
+          <div class="col-sm-6">
+            <ul class="list-group" data-sortable='{"group":"shared","animation":150}'>
+              <li class="list-group-item">Item 1</li>
+              <li class="list-group-item">Item 2</li>
+              <li class="list-group-item">Item 3</li>
+            </ul>
+          </div>
+          <div class="col-sm-6">
+            <ul class="list-group" data-sortable='{"group":"shared","animation":150}'>
+              <li class="list-group-item">Item A</li>
+              <li class="list-group-item">Item B</li>
+              <li class="list-group-item">Item C</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+

shared/data/menu.json

@@ -415,6 +415,10 @@
         "title": "Dropzone",
         "url": "dropzone.html"
       },
+      "sortable": {
+        "title": "Sortable",
+        "url": "sortable.html"
+      },
       "fullcalendar": {
         "url": "fullcalendar.html",
         "title": "Fullcalendar"