diff --git a/injection-order/injection-order.css b/injection-order/injection-order.css index bdd57965..aedb5932 100644 --- a/injection-order/injection-order.css +++ b/injection-order/injection-order.css @@ -19,21 +19,20 @@ } .injection-order a { display: block; + color: #000; + text-decoration: none; + transition: transform .25s ease-in-out; + z-index: 1; user-select: none; padding: 0.3em .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: move; - color: #000; - text-decoration: none; } .injection-order a.enabled { font-weight: bold; } -.injection-order a:active { - background: white; -} .injection-order a:hover { text-decoration: underline; } @@ -45,12 +44,9 @@ padding: 0.6em; font-weight: normal; } -.injection-order .draggable-list-dragging a { - transition: transform .25s ease-in-out; - z-index: 1; -} -.injection-order a.draggable-list-target { +.injection-order .draggable-list-target { + position: relative; + background: lightcyan; transition: none; z-index: 100; - position: relative; } diff --git a/injection-order/injection-order.js b/injection-order/injection-order.js index 50b1fb4b..68130d84 100644 --- a/injection-order/injection-order.js +++ b/injection-order/injection-order.js @@ -19,6 +19,7 @@ async function InjectionOrder(show = true) { maxTranslateY = ol.scrollHeight - d.dragTarget.offsetHeight - d.dragTarget.offsetTop; }); ol.on('d:dragmove', ({detail: d}) => { + d.origin.stopPropagation(); // preserves dropEffect d.origin.dataTransfer.dropEffect = 'move'; const y = Math.min(d.currentPos.y - d.startPos.y, maxTranslateY); d.dragTarget.style.transform = `translateY(${y}px)`; @@ -29,7 +30,7 @@ async function InjectionOrder(show = true) { ol.insertBefore(d.dragTarget, d.insertBefore); prefs.set('injectionOrder', entries.map(l => l.style._id)); }); - new DraggableList(ol, {scrollContainer: ol}); + DraggableList(ol, {scrollContainer: ol}); await messageBoxProxy.show({ title: t('styleInjectionOrder'),