diff --git a/resources/js/components/book-sort.js b/resources/js/components/book-sort.js index da2b28d8e..b0d64ad17 100644 --- 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 32c56f385..77727060e 100644 --- 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;