Collection form items: change dragover method to work on mobile

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,37 +37,78 @@ 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">
-    <BookListElement v-bind="props.book">
-      <div class="separator" />
-      <div class="centered">
-        <div
-          v-if="!isInputtingPosition"
-          @click="isInputtingPosition = true"
-          class="positionindicator centered is-narrow clickable"
-        >
-          {{ props.position }}
+  <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">
+          <div
+            v-if="!isInputtingPosition"
+            @click="isInputtingPosition = true"
+            class="positionindicator centered is-narrow clickable"
+          >
+            {{ props.position }}
+          </div>
+          <div v-else>
+            <input
+              type="text"
+              v-model="inputtedPosition"
+              v-focus
+              @blur="clearPositionInput"
+              @keyup.enter="onPositionInput"
+              size="1"
+              class="positioninput"
+              :placeholder="props.position"
+            />
+          </div>
         </div>
-        <div v-else>
-          <input
-            type="text"
-            v-model="inputtedPosition"
-            v-focus
-            @blur="clearPositionInput"
-            @keyup.enter="onPositionInput"
-            size="1"
-            class="positioninput"
-            :placeholder="props.position"
-          />
+        <div class="separator" />
+        <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
+          <b-icon-list />
         </div>
-      </div>
-      <div class="separator" />
-      <div class="positionwidget centered is-narrow">
-        <b-icon-list />
-      </div>
-    </BookListElement>
+      </BookListElement>
+    </div>
+    <div v-if="isDragover && isDragoverFromAbove" class="dragover" />
   </div>
 </template>
 
@@ -70,6 +116,7 @@ function clearPositionInput() {
 .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 {