Added multi-select to book-sort interface

As discussed in #2064

Closes #2067

diff --git a/resources/js/components/book-sort.js b/resources/js/components/book-sort.js
index da2b28d8e2a79fb0f4da1bf81d73bf5ca8c17f90..b0d64ad172f1e0abe7b4e457a415c588a083da1c 100644 (file)
--- a/resources/js/components/book-sort.js
+++ b/resources/js/components/book-sort.js
@@ -1,4 +1,4 @@
-import Sortable from "sortablejs";
+import {Sortable, MultiDrag} from "sortablejs";
 
 // Auto sort control
 const sortOperations = {
@@ -43,6 +43,7 @@ class BookSort {
         this.input = elem.querySelector('[book-sort-input]');
 
         const initialSortBox = elem.querySelector('.sort-box');
+        Sortable.mount(new MultiDrag());
         this.setupBookSortable(initialSortBox);
         this.setupSortPresets();
 
@@ -134,6 +135,9 @@ class BookSort {
                 onSort: this.updateMapInput.bind(this),
                 dragClass: 'bg-white',
                 ghostClass: 'primary-background-light',
+                multiDrag: true,
+                multiDragKey: 'CTRL',
+                selectedClass: 'sortable-selected',
             });
         }
     }

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 32c56f385c1e470aa9f5a2b48528d6148f3fb16c..77727060e64e8bdf0d333f830deb805db148e117 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -275,6 +275,10 @@
   .entity-list-item > span:first-child {
     align-self: flex-start;
   }
+  .sortable-selected  .entity-list-item, .sortable-selected  .entity-list-item:hover {
+    outline: 1px dotted var(--color-primary);
+    background-color: var(--color-primary-light) !important;
+  }
   .entity-list-item > div {
     display: block;
     flex: 1;