Make entries draggable

manage/draggable.js

@@ -0,0 +1,44 @@
+/* global UI $$ */
+'use strict';
+
+// Polyfill for mobile? - https://caniuse.com/#feat=dragndrop
+(() => {
+  let dragged = null;
+
+  function cleanup() {
+    $$('.entry.dragging').forEach(el => {
+      el.classList.remove('dragging');
+    });
+    $('body').classList.remove('dragging');
+  }
+
+  document.addEventListener('dragstart', event => {
+    const el = event.target.closest('.entry');
+    if (el) {
+      dragged = el;
+      el.classList.add('dragging');
+      $('body').classList.add('dragging');
+    }
+  }, false);
+
+  document.addEventListener('dragend', () => {
+    cleanup();
+  });
+
+  document.addEventListener('dragenter', event => {
+    const el = event.target.closest('.entry, .entry-header');
+    if (el && dragged) {
+      // Insert after the target; keeps header at top
+      el.after(dragged);
+    }
+  }, false);
+
+  document.addEventListener('drop', event => {
+    event.preventDefault();
+    cleanup();
+    if (dragged) {
+      dragged = null;
+    }
+  }, false);
+
+})();

manage/manage.css

@@ -226,8 +226,13 @@ a:hover {
   pointer-events: none;
 }
 
+body.dragging .entry:not(.dragging) .entry-name:before {
+  /* hide the sustained hover */
+  background-image: none !important;
+}
+
 .entry.dragging {
-  background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+  background: linear-gradient(to right, hsla(350, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
 }
 
 .entry.enabled .entry-name:hover .style-name {