replace the sortable jquery plugin with html5sortable

css/admin.css

@@ -20,7 +20,7 @@
     margin: 10px 0 10px 0;
 }
 
-#side-menu-section input[type="checkbox"] {
+#-dropside-menu-section input[type="checkbox"] {
     vertical-align: middle;
 }
 
@@ -81,6 +81,12 @@
     cursor: pointer;
 }
 
+.side-menu-setting-list-drop {
+    background: yellow;
+    border-color: yellow;
+    height: 34px;
+}
+
 .side-menu-setting.arrow {
     color: #ccc;
     padding-right: 5px;

src/admin.js

@@ -186,17 +186,17 @@ document.addEventListener('DOMContentLoaded', () => {
         })
     }
 
-    jQuery("#categories-list .side-menu-setting-list").sortable({
+    sortable('#categories-list .side-menu-setting-list', {
-        forcePlaceholderSize: true,
+        placeholderClass: 'side-menu-setting-list-drop'
-        placeholder: 'placeholder',
+    })
-        stop: function (event, ui) {
-            let value = []
 
-            for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
+    sortable('#categories-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
-                value.push(item.getAttribute('data-id'))
+        let value = []
-            }
 
-            document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
+        for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
+            value.push(item.getAttribute('data-id'))
         }
+
+        document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
     })
 })

templates/settings/admin-form.php

@@ -20,6 +20,7 @@ use OCP\IURLGenerator;
 use OCP\IConfig;
 use OCA\SideMenu\AppInfo\Application;
 
+vendor_script('side_menu', 'html5sortable.min');
 script('side_menu', 'admin');
 style('side_menu', 'admin');