use sortablejs instead of jquery-ui (linuxserver#1115)

package.json

@@ -24,6 +24,7 @@
         "sass-loader": "13.*"
     },
     "dependencies": {
-        "select2": "^4.0.13"
+        "select2": "^4.0.13",
+        "sortablejs": "^1.15.0"
     }
 }

resources/assets/js/app.js

@@ -52,15 +52,38 @@ $.when($.ready).then(() => {
         }
       }); */
 
-  $("#sortable").sortable({
-    stop() {
-      const idsInOrder = $("#sortable").sortable("toArray", {
-        attribute: "data-id",
+  const sortableEl = document.getElementById("sortable");
+  let sortable;
+  if (sortableEl !== null) {
+    // eslint-disable-next-line no-undef
+    sortable = Sortable.create(sortableEl, {
+      disabled: true,
+      animation: 150,
+      forceFallback: !(
+        navigator.userAgent.toLowerCase().indexOf("firefox") > -1
+      ),
+      draggable: ".item-container",
+      onEnd() {
+        const idsInOrder = sortable.toArray();
+        $.post(`${base}order`, { order: idsInOrder });
+      },
+    });
+    // prevent Firefox drag behavior
+    if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
+      sortable.option("setData", (dataTransfer) => {
+        dataTransfer.setData("Text", "");
       });
-      $.post(`${base}order`, { order: idsInOrder });
-    },
-  });
-  $("#sortable").sortable("disable");
+
+      sortableEl.addEventListener("dragstart", (event) => {
+        const { target } = event;
+        if (target.nodeName.toLowerCase() === "a") {
+          event.preventDefault();
+          event.stopPropagation();
+          event.dataTransfer.setData("Text", "");
+        }
+      });
+    }
+  }
 
   $("#main")
     .on("mouseenter", "#sortable.ui-sortable-disabled .item", function () {
@@ -138,10 +161,10 @@ $.when($.ready).then(() => {
         $(".item-edit").hide();
         $("#app").removeClass("sidebar");
         $("#sortable .tooltip").css("display", "");
-        $("#sortable").sortable("disable");
+        if (sortable !== undefined) sortable.option("disabled", true);
       } else {
         $("#sortable .tooltip").css("display", "none");
-        $("#sortable").sortable("enable");
+        if (sortable !== undefined) sortable.option("disabled", false);
         setTimeout(() => {
           $(".add-item").fadeIn();
           $(".item-edit").fadeIn();

resources/assets/sass/_app.scss

@@ -1125,6 +1125,16 @@ select:-webkit-autofill:focus {
   color: $app-text!important;
 }
 
+.sortable-drag {
+	opacity: 1!important;
+}
+
+#sortable {
+	.sortable-ghost:not(.sortable-drag) {
+		opacity: 0;
+	}
+}
+
 #sortable:focus-within {
 	.item:focus-within {
 		outline: 1px solid #ffffff91;

webpack.mix.js

@@ -14,6 +14,7 @@ const mix = require("laravel-mix");
 mix
   .babel(
     [
+      "node_modules/sortablejs/Sortable.min.js",
       "resources/assets/js/jquery-ui.min.js",
       "resources/assets/js/huebee.js",
       "resources/assets/js/app.js",