Collections: allow to drag and drop to change book position

front/src/CollectionFormElement.vue

@@ -2,12 +2,14 @@
 import BookListElement from './BookListElement.vue'
 
 const props = defineProps({
+  isDragover: Boolean,
+  id: Number,
   position: Number,
   book: Array,
 })
 </script>
 <template>
-  <div class="collectionitembox">
+  <div :class="isDragover ? 'dragover' : ''" draggable="true" class="collectionitembox">
     <BookListElement v-bind="props.book">
       <div class="separator" />
       <div class="positionindicator centered is-narrow">
@@ -50,9 +52,15 @@ const props = defineProps({
   margin-right: 30px;
   border-top-right-radius: var(--bulma-box-radius);
   border-bottom-right-radius: var(--bulma-box-radius);
+  cursor: grab;
 }
 
-.positionwidget:hover {
-  cursor: move;
+.positionwidget:active {
+  cursor: grabbing;
+}
+
+.dragover {
+  border: 3px solid var(--bulma-primary);
+  border-radius: 10px;
 }
 </style>