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) {
+function checkGrabbedPosition(itemId, y) {
-  event.dataTransfer.effectAllowed = 'move'
+  const itemBeingMoved = itemRefs.value.find((it) => it.id == itemId)
-  // Custom type to identify a collectionitem drag
+  const itemMovedY = itemBeingMoved.$el.offsetTop + y + itemBeingMoved.$el.offsetHeight / 2
-  event.dataTransfer.setData('collectionitem', '')
+  itemRefs.value.forEach((it) => {
-  itemIdBeingGrabbed.value = id
+    if (it.$props.id == itemIdBeingGrabbed.value) {
-}
-
-function onDragover(event) {
-  if (event.dataTransfer.types.includes('collectionitem')) {
-    event.preventDefault()
-  }
-}
-
-function onDrop(id, position) {
-  if (id == itemIdBeingGrabbed.value) {
-    //nothing to do
       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 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 isDragoverFromAbove(position) {
+  if (itemIdBeingGrabbed.value == null) {
+    return false
+  }
+  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>

front/src/CollectionFormElement.vue

@@ -3,13 +3,14 @@ import { ref } from 'vue'
 import BookListElement from './BookListElement.vue'
 
 const props = defineProps({
-  isDragover: Boolean,
   id: Number,
   position: Number,
   book: Array,
+  isDragover: Boolean,
+  isDragoverFromAbove: Boolean,
 })
 
-const emit = defineEmits('positionchange')
+const emit = defineEmits(['positionchange', 'startgrab', 'stopgrab', 'grabbing'])
 
 const vFocus = {
   mounted: (el) => el.focus(),
@@ -18,6 +19,10 @@ const vFocus = {
 const isInputtingPosition = ref(false)
 const inputtedPosition = ref('')
 
+const initialGrabPosition = ref(null)
+
+const draggedPosition = ref(null)
+
 function onPositionInput() {
   if (inputtedPosition.value != '' && !isNaN(inputtedPosition.value)) {
     const parsedPosition = parseInt(inputtedPosition.value)
@@ -32,9 +37,48 @@ function clearPositionInput() {
   isInputtingPosition.value = false
   inputtedPosition.value = ''
 }
+
+function clearGrabVariables() {
+  initialGrabPosition.value = null
+  draggedPosition.value = null
+}
+
+function onPointerUp() {
+  clearGrabVariables()
+  emit('stopgrab')
+}
+
+function onPointerDown(e) {
+  initialGrabPosition.value = e.pageY
+  e.preventDefault()
+  emit('startgrab')
+}
+
+function onPointerMove(e) {
+  if (initialGrabPosition.value == null) {
+    return
+  }
+  e.preventDefault()
+  draggedPosition.value = e.pageY - initialGrabPosition.value
+  emit('grabbing', draggedPosition.value)
+}
 </script>
+
 <template>
-  <div :class="isDragover ? 'dragover' : ''" draggable="true" class="collectionitembox">
+  <div>
+    <div v-if="isDragover && !isDragoverFromAbove" class="dragover" />
+    <div
+      :style="
+        draggedPosition
+          ? 'transform: translateY(' + draggedPosition + 'px);position:relative;z-index:3'
+          : ''
+      "
+      ref="collectionitembox"
+      class="collectionitembox"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointerleave="clearGrabVariables"
+    >
       <BookListElement v-bind="props.book">
         <div class="separator" />
         <div class="centered">
@@ -59,17 +103,20 @@ function clearPositionInput() {
           </div>
         </div>
         <div class="separator" />
-      <div class="positionwidget centered is-narrow">
+        <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
           <b-icon-list />
         </div>
       </BookListElement>
     </div>
+    <div v-if="isDragover && isDragoverFromAbove" class="dragover" />
+  </div>
 </template>
 
 <style scoped>
 .collectionitembox {
   transition: ease-in-out 0.04s;
   display: flex;
+  z-index: 2;
 }
 
 .collectionitembox:hover {
@@ -106,6 +153,7 @@ function clearPositionInput() {
   border-top-right-radius: var(--bulma-box-radius);
   border-bottom-right-radius: var(--bulma-box-radius);
   cursor: grab;
+  touch-action: none;
 }
 
 .positionwidget:active {