Feat : move card and keep position on array reorder

components/CardPreview.vue

@@ -20,7 +20,14 @@ const props = withDefaults(defineProps<Props>(), {
   noEffects: () => false,
 });
 
-const emit = defineEmits(["click", "effectClick", "drop", "move"]);
+const emit = defineEmits([
+  "click",
+  "effectClick",
+  "drop",
+  "move",
+  "startMove",
+  "stopMove",
+]);
 
 const settingsStore = useSettingsStore();
 
@@ -39,6 +46,9 @@ const dragStatus = ref<{
 const initialOffsetX = ref(0);
 const initialOffsetY = ref(0);
 
+const mousePageX = ref(0);
+const mousePageY = ref(0);
+
 const offsetX = ref(0);
 const offsetY = ref(0);
 const offsetWidth = ref(0);
@@ -71,8 +81,6 @@ function mouseenter(e: MouseEvent) {
 }
 function mouseleave(e: MouseEvent) {
   isZooming.value = false;
-  dragStatus.value.dragging = false;
-  clearTimeout(dragStatus.value.intervalEvent);
 }
 
 function rightClickDown(e: MouseEvent) {
@@ -84,6 +92,7 @@ function rightClickUp(e: MouseEvent) {
 }
 
 function startDrag(e: MouseEvent) {
+  emit("startMove");
   dragStatus.value.dragging = true;
   translateX.value = 0;
   translateY.value = 0;
@@ -91,20 +100,31 @@ function startDrag(e: MouseEvent) {
   if (!cardElement) {
     return;
   }
+  mousePageX.value = e.pageX;
+  mousePageY.value = e.pageY;
   initialOffsetX.value = e.offsetX;
   initialOffsetY.value = e.offsetY;
   offsetX.value = cardElement.offsetLeft + e.offsetX;
   offsetY.value = cardElement.offsetTop + e.offsetY;
-  translateX.value = e.pageX - offsetX.value;
-  translateY.value = e.pageY - offsetY.value;
+  translateX.value = mousePageX.value - offsetX.value;
+  translateY.value = mousePageY.value - offsetY.value;
 }
+
 function leftClickDown(e: MouseEvent) {
   dragStatus.value.hasClickedDown = true;
   window.addEventListener("mousemove", mouseMove, false);
 }
 
 function leftClickUpGlobal(e: MouseEvent) {
-  dragStatus.value.dragging = false;
+  mousePageX.value = e.pageX;
+  mousePageY.value = e.pageY;
+
+  if (dragStatus.value.dragging && dragStatus.value.hasClickedDown) {
+    dragStatus.value.dragging = false;
+    emit("drop", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
+    emit("stopMove");
+  }
+  dragStatus.value.hasClickedDown = false;
   clearTimeout(dragStatus.value.intervalEvent);
   window.removeEventListener("mousemove", mouseMove, false);
 }
@@ -115,12 +135,6 @@ function leftClickUp(e: MouseEvent) {
     cardClick();
     return;
   }
-
-  if (dragStatus.value.dragging && dragStatus.value.hasClickedDown) {
-    dragStatus.value.dragging = false;
-    dragStatus.value.hasClickedDown = false;
-    emit("drop", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
-  }
 }
 
 const sensitivity = 0.5;
@@ -137,14 +151,16 @@ function mouseMove(e: MouseEvent) {
   if (!cardElement) {
     return;
   }
+  mousePageX.value = e.pageX;
+  mousePageY.value = e.pageY;
   // console.log(cardElement.offsetLeft);
   offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
   offsetY.value = cardElement.offsetTop + initialOffsetY.value;
 
-  translateX.value = e.pageX - offsetX.value;
-  translateY.value = e.pageY - offsetY.value;
+  translateX.value = mousePageX.value - offsetX.value;
+  translateY.value = mousePageY.value - offsetY.value;
 
-  emit("move", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
+  // emit("move", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
 }
 
 defineExpose({
@@ -168,14 +184,30 @@ onMounted(() => {
   cardElement.offsetWidth;
 });
 
-onRenderTriggered(() => {
+// onRenderTriggered(() => {
+//   const cardElement = card.value;
+//   if (!cardElement) {
+//     return;
+//   }
+//   offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
+//   offsetY.value = cardElement.offsetTop + initialOffsetY.value;
+
+//   translateX.value = mousePageX.value - offsetX.value;
+//   translateY.value = mousePageY.value - offsetY.value;
+// });
+
+onUpdated(() => {
   const cardElement = card.value;
   if (!cardElement) {
     return;
   }
-  offsetX.value = cardElement.offsetLeft;
-  offsetY.value = cardElement.offsetTop;
+  offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
+  offsetY.value = cardElement.offsetTop + initialOffsetY.value;
+
+  translateX.value = mousePageX.value - offsetX.value;
+  translateY.value = mousePageY.value - offsetY.value;
 });
+
 onUnmounted(() => {
   window.removeEventListener("mouseup", leftClickUpGlobal, false);
   // window.addEventListener("mousemove", mouseMove, false);
@@ -199,6 +231,8 @@ onUnmounted(() => {
     @mouseup.right="rightClickUp"
     @mousedown.left="leftClickDown"
     @mouseup.left="leftClickUp"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
   >
     <div id="overlay"><slot></slot></div>
 

components/CardsGrouped.vue

@@ -87,6 +87,16 @@ function endAnimation() {
 onUnmounted(() => {
   // containerEvents.delete(props.container._id);
 });
+
+const interval = ref<ReturnType<typeof setInterval>>();
+function startMove() {
+  interval.value = setInterval(() => {
+    props.container.cards.sort((a, b) => Math.random() - 0.5);
+  }, 1000);
+}
+function stopMove() {
+  clearInterval(interval.value);
+}
 </script>
 
 <template>
@@ -98,6 +108,8 @@ onUnmounted(() => {
       <CardPreview
         @click="$emit('cardClick', c._id)"
         @effectClick="$emit('effectClick', c._id, $event)"
+        @startMove="startMove"
+        @stopMove="stopMove"
         v-for="c in cards"
         :card_id="c.cardId"
         :wrapped="wrapped"