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"