Only allow manual sort with ID column sort

manage.html

@@ -41,6 +41,11 @@
         </label>
       </div>
       <div class="entry-col entry-id"></div>
+      <div class="entry-col entry-sort" draggable="true">
+        <svg class="svg-icon sort" viewBox="0 0 24 24">
+          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+        </svg>
+      </div>
       <div class="entry-col entry-state">
         <label class="checkmate" tabindex="0">
           <input class="entry-state-toggle" type="checkbox">
@@ -101,11 +106,6 @@
           </svg>
         </a>
       </div>
-      <div class="entry-col entry-sort" draggable="true">
-        <svg class="svg-icon sort" viewBox="0 0 24 24">
-          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
-        </svg>
-      </div>
       <div class="entry-col entry-version"></div>
       <div class="entry-col entry-last-update tt-w"></div>
       <div class="entry-col entry-applies-to">
@@ -479,12 +479,12 @@
     <div class="entry-col header-id">
       <a href="#" class="sortable tt-se" data-type="order" i18n-data-title="sortLabel;sortColumnInjection">#<span></span></a>
     </div>
+    <div class="entry-col header-sort center-text tt-se" i18n-text="sortHeader" i18n-data-title="sortHeaderOrderLabel"></div>
     <a href="#" class="entry-col sortable header-state center-text tt-se" i18n-text="genericEnabledLabel" i18n-data-title="sortLabel;sortColumnEnabled" data-type="enabled"><span></span></a>
     <div class="entry-col header-name">
       <a href="#" class="sortable tt-se" i18n-text="genericName" i18n-data-title="sortLabel;sortColumnName" data-type="title"><span></span></a>
     </div>
     <div class="entry-col header-actions" i18n-text="optionsActions"></div>
-    <div class="entry-col header-sort center-text tt-sw" i18n-text="sortHeader" i18n-data-title="sortHeaderOrderLabel"></div>
     <div class="entry-col header-version">
       <a href="#" class="sortable tt-sw" i18n-data-title="sortLabel;sortColumnVersion" data-type="version">v#<span></span></a>
     </div>

manage/draggable.js

@@ -1,25 +1,36 @@
-/* global $$ updateInjectionOrder */
+/* global $$ installed updateInjectionOrder */
 'use strict';
 
 // Polyfill for mobile? - https://caniuse.com/#feat=dragndrop
 (() => {
   let dragged = null;
 
+  function isEnabled() {
+    return installed.dataset.sort === 'order';
+  }
+
   function cleanup() {
     $$('.entry.dragging').forEach(el => {
       el.classList.remove('dragging');
     });
-    $('body').classList.remove('dragging');
+    if (isEnabled() && $('body').classList.contains('dragging')) {
       updateInjectionOrder();
     }
+    $('body').classList.remove('dragging');
+  }
 
   document.addEventListener('dragstart', event => {
+    if (isEnabled()) {
       const el = event.target && event.target.closest('.entry');
       if (el) {
         dragged = el;
         el.classList.add('dragging');
         $('body').classList.add('dragging');
       }
+    } else {
+      cleanup();
+      return false;
+    }
   }, false);
 
   document.addEventListener('dragend', () => {
@@ -27,11 +38,13 @@
   });
 
   document.addEventListener('dragenter', event => {
+    if (isEnabled()) {
       const el = event.target && 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 => {

manage/manage.css

@@ -335,6 +335,8 @@ body.all-styles-hidden-by-filters #installed:after {
   width: var(--entry-icon-size);
 }
 
+.header-sort,
+.entry-sort,
 #installed:not(.has-favicons) .targets img,
 #installed.has-favicons .targets img:not([src]),
 #installed.has-favicons .targets img[src] + svg {
@@ -451,6 +453,8 @@ a svg, .svg-icon.sort {
   pointer-events: none;
 }
 
+#installed[data-sort="order"] .header-sort,
+#installed[data-sort="order"] .entry-sort,
 /* Update icons */
 .can-update .update,
 .no-update:not(.update-problem):not(.update-done) .up-to-date,

manage/sort.js

@@ -79,6 +79,10 @@ const sorter = (() => {
     // show it in the header
     sortBy = sortBy.concat(defaultSort.split(splitRegex));
     const len = sortBy.length;
+
+    // Add first column sort to #installed; show sortable column when id column sorted
+    installed.dataset.sort = sortBy[0];
+
     return styles.sort((a, b) => {
       let types, direction, x, y;
       let result = 0;