Collection form items: change dragover method to work on mobile

front/src/CollectionForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { getCollection, postCollectionChangePosition } from './api.js'
 import CollectionFormElement from './CollectionFormElement.vue'
 import AddBookToCollection from './AddBookToCollection.vue'
@@ -17,6 +17,8 @@ const offset = computed(() => (pageNumber.value - 1) * limit)
 const data = ref(null)
 const error = ref(null)
 
+const itemRefs = useTemplateRef('items')
+
 const itemIdBeingGrabbed = ref(null)
 
 const itemIdBeingOvered = ref(null)
@@ -40,25 +42,39 @@ function fetchCollection() {
   pageChange(1)
 }
 
-function onDragStart(event, id) {
-  event.dataTransfer.effectAllowed = 'move'
-  // Custom type to identify a collectionitem drag
-  event.dataTransfer.setData('collectionitem', '')
-  itemIdBeingGrabbed.value = id
+function checkGrabbedPosition(itemId, y) {
+  const itemBeingMoved = itemRefs.value.find((it) => it.id == itemId)
+  const itemMovedY = itemBeingMoved.$el.offsetTop + y + itemBeingMoved.$el.offsetHeight / 2
+  itemRefs.value.forEach((it) => {
+    if (it.$props.id == itemIdBeingGrabbed.value) {
+      return
+    }
+    if (
+      it.$el.offsetTop + it.$el.offsetHeight / 2 < itemMovedY &&
+      itemMovedY < it.$el.offsetTop + (3 * it.$el.offsetHeight) / 2
+    ) {
+      itemIdBeingOvered.value = it.$props.id
+    }
+  })
 }
 
-function onDragover(event) {
-  if (event.dataTransfer.types.includes('collectionitem')) {
-    event.preventDefault()
+function onStopGrab() {
+  if (itemIdBeingOvered.value != null) {
+    const position = data.value.items.find((it) => it.id == itemIdBeingOvered.value).position
+    changePosition(itemIdBeingGrabbed.value, position)
   }
+  itemIdBeingGrabbed.value = null
+  itemIdBeingOvered.value = null
 }
 
-function onDrop(id, position) {
-  if (id == itemIdBeingGrabbed.value) {
-    //nothing to do
-    return
+function isDragoverFromAbove(position) {
+  if (itemIdBeingGrabbed.value == null) {
+    return false
   }
-  changePosition(itemIdBeingGrabbed.value, position)
+  const grabbedItemPosition = data.value.items.find(
+    (it) => it.id == itemIdBeingGrabbed.value,
+  ).position
+  return position > grabbedItemPosition
 }
 
 function changePosition(id, position) {
@@ -72,11 +88,6 @@ function changePosition(id, position) {
     }
   })
 }
-
-function onDragend() {
-  itemIdBeingGrabbed.value = null
-  itemIdBeingOvered.value = null
-}
 </script>
 
 <template>
@@ -84,20 +95,20 @@ function onDragend() {
   <div v-if="data">
     <h2 class="title">{{ data.name }}</h2>
     <AddBookToCollection :collection-id="props.id" @created="fetchCollection" />
-    <div>
+    <TransitionGroup name="list" tag="div">
       <CollectionFormElement
-        @drop="onDrop(item.id, item.position)"
-        @dragstart="(e) => onDragStart(e, item.id)"
-        @dragend="onDragend"
-        @dragover="onDragover"
-        @dragenter="itemIdBeingOvered = item.id"
         @positionchange="(pos) => changePosition(item.id, pos)"
+        @startgrab="itemIdBeingGrabbed = item.id"
+        @grabbing="(y) => checkGrabbedPosition(item.id, y)"
+        @stopgrab="onStopGrab"
         v-for="item in data.items"
         :key="item.id"
-        :is-dragover="itemIdBeingOvered === item.id"
         v-bind="item"
+        ref="items"
+        :is-dragover="item.id == itemIdBeingOvered"
+        :is-dragover-from-above="isDragoverFromAbove(item.position)"
       />
-    </div>
+    </TransitionGroup>
     <Pagination
       class="mt-5"
       :pageNumber="pageNumber"
@@ -108,4 +119,22 @@ function onDragend() {
   </div>
 </template>
 
-<style></style>
+<style scoped>
+.list-move, /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+  position: absolute;
+}
+</style>