fix dropEffect + highlight the target

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;
 }

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'),