diff --git a/manage/draggable.js b/manage/draggable.js new file mode 100644 index 00000000..a4841fbc --- /dev/null +++ b/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); + +})(); diff --git a/manage/manage.css b/manage/manage.css index 64e3ef37..a82dbb56 100644 --- a/manage/manage.css +++ b/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 {