feat(boards): ease dragging a card toward an off-screen spot

Scroll the column while a card is held near its edge and show a light gap where the card will land.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/pipeline/DealCard.vue

@@ -76,11 +76,13 @@ const priorityFlag = computed(() =>
 
 const cardStyle = computed(() => ({
   cursor: props.selectMode ? 'pointer' : 'grab',
-  opacity: props.dragging ? 0.45 : 1,
+  opacity: props.dragging ? 0.4 : 1,
+  transform: props.dragging ? 'scale(0.98)' : 'none',
+  transition: 'opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease',
   margin: 0,
   background: props.selected ? token.value.colorPrimaryBg : token.value.colorBgContainer,
   borderColor: props.selected ? token.value.colorPrimary : token.value.colorBorderSecondary,
-  boxShadow: token.value.boxShadowTertiary,
+  boxShadow: props.dragging ? token.value.boxShadow : token.value.boxShadowTertiary,
 }));
 </script>
 

apps/web/src/components/pipeline/PipelineColumn.vue

@@ -13,7 +13,7 @@ import {
 import AddDealButton from './AddDealButton.vue';
 import DealCard from './DealCard.vue';
 import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
-import { DEAL_BOARD_COPY, PIPELINE_ACCENT, pointerDropIndex } from '@/lib/pipeline-board';
+import { DEAL_BOARD_COPY, PIPELINE_ACCENT, dragScrollColumn, pointerDropIndex, stopDragScroll } from '@/lib/pipeline-board';
 
 const props = withDefaults(
   defineProps<{
@@ -51,6 +51,8 @@ const emit = defineEmits<{
 const { Text: ATypographyText } = Typography;
 const { token } = theme.useToken();
 
+const bodyEl = ref<HTMLElement | null>(null);
+const insertAt = ref<number | null>(null);
 const renaming = ref(false);
 const draft = ref('');
 const titleInput = ref<{ focus: () => void; select?: () => void } | null>(null);
@@ -106,16 +108,49 @@ const bodyStyle = computed(() => ({
   margin: 0,
 }));
 
-function onCardDragOver(stageId: string, event: DragEvent) {
+function trackDrag(event: DragEvent, index: number | null) {
   event.preventDefault();
+  dragScrollColumn(bodyEl.value, event.clientY);
+  if (index != null) insertAt.value = index;
+}
+
+function clearDragUi() {
+  insertAt.value = null;
+  stopDragScroll();
+}
+
+function onCardDragOver(stageId: string, index: number, event: DragEvent) {
   event.stopPropagation();
+  trackDrag(event, pointerDropIndex(index, event));
   emit('dragOver', stageId, event);
 }
 
+function onColumnDrop(event: DragEvent) {
+  const at = insertAt.value ?? undefined;
+  clearDragUi();
+  emit('drop', props.stage.id, event, at);
+}
+
 function onCardDrop(stageId: string, index: number, event: DragEvent) {
   event.preventDefault();
   event.stopPropagation();
-  emit('drop', stageId, event, pointerDropIndex(index, event));
+  const at = insertAt.value ?? pointerDropIndex(index, event);
+  clearDragUi();
+  emit('drop', stageId, event, at);
+}
+
+function slotStyle(active: boolean, collapseGap = false) {
+  return {
+    height: active ? '36px' : '0px',
+    marginTop: !active && collapseGap ? '-12px' : '0',
+    borderRadius: `${token.value.borderRadius}px`,
+    background: active ? token.value.colorPrimaryBg : 'transparent',
+    outline: active ? `1px dashed ${token.value.colorPrimary}` : 'none',
+    outlineOffset: '-1px',
+    transition: 'height 180ms ease, margin-top 180ms ease, background 180ms ease',
+    overflow: 'hidden',
+    flexShrink: 0,
+  };
 }
 
 function startRename() {
@@ -174,8 +209,8 @@ function onMenuClick({ key }: { key: string | number }) {
 <template>
   <section
     :style="columnStyle"
-    @dragover.prevent="emit('dragOver', stage.id, $event)"
+    @dragover.prevent="trackDrag($event, null); emit('dragOver', stage.id, $event)"
-    @drop.prevent="emit('drop', stage.id, $event)"
+    @drop.prevent="onColumnDrop"
   >
     <div :style="headStyle">
       <span
@@ -260,13 +295,18 @@ function onMenuClick({ key }: { key: string | number }) {
       </a-dropdown>
     </div>
 
-    <div role="list" :aria-label="stage.title" :style="bodyStyle">
+    <div ref="bodyEl" role="list" :aria-label="stage.title" :style="bodyStyle">
       <div
         v-for="(deal, index) in stage.deals"
         :key="deal.id"
-        @dragover="onCardDragOver(stage.id, $event)"
+        @dragover="onCardDragOver(stage.id, index, $event)"
         @drop="onCardDrop(stage.id, index, $event)"
       >
+        <div
+          :style="slotStyle(dropActive && insertAt === index)"
+          @dragover.stop.prevent="trackDrag($event, index); emit('dragOver', stage.id, $event)"
+          @drop.stop.prevent="clearDragUi(); emit('drop', stage.id, $event, index)"
+        />
         <DealCard
           :deal="deal"
           :accent="stage.color"
@@ -275,13 +315,18 @@ function onMenuClick({ key }: { key: string | number }) {
           :select-mode="selectMode"
           :selected="selectedIds.has(deal.id)"
           @drag-start="(d, e) => emit('dragStart', d, e)"
-          @drag-end="emit('dragEnd')"
+          @drag-end="clearDragUi(); emit('dragEnd')"
           @open="emit('openDeal', $event)"
           @menu="emit('menuDeal', $event)"
           @toggle-select="emit('toggleSelect', $event)"
           @bulk-delete="emit('bulkDelete')"
         />
       </div>
+      <div
+        :style="slotStyle(dropActive && insertAt === stage.deals.length, true)"
+        @dragover.stop.prevent="trackDrag($event, stage.deals.length); emit('dragOver', stage.id, $event)"
+        @drop.stop.prevent="clearDragUi(); emit('drop', stage.id, $event, stage.deals.length)"
+      />
       <a-typography-text
         v-if="!stage.deals.length"
         type="secondary"

apps/web/src/lib/pipeline-board.ts

@@ -431,6 +431,43 @@ export function pointerDropIndex(index: number, event: DragEvent): number {
   return index + (event.clientY >= rect.top + rect.height / 2 ? 1 : 0);
 }
 
+const DRAG_SCROLL_EDGE = 72;
+const DRAG_SCROLL_MAX = 16;
+let dragScrollEl: HTMLElement | null = null;
+let dragScrollY = 0;
+let dragScrollRaf = 0;
+
+function dragScrollTick() {
+  dragScrollRaf = 0;
+  const el = dragScrollEl;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  let delta = 0;
+  if (dragScrollY < rect.top + DRAG_SCROLL_EDGE) {
+    const closeness = (rect.top + DRAG_SCROLL_EDGE - dragScrollY) / DRAG_SCROLL_EDGE;
+    delta = -Math.ceil(DRAG_SCROLL_MAX * Math.min(1, Math.max(0, closeness)));
+  } else if (dragScrollY > rect.bottom - DRAG_SCROLL_EDGE) {
+    const closeness = (dragScrollY - (rect.bottom - DRAG_SCROLL_EDGE)) / DRAG_SCROLL_EDGE;
+    delta = Math.ceil(DRAG_SCROLL_MAX * Math.min(1, Math.max(0, closeness)));
+  }
+  if (!delta || el.scrollHeight <= el.clientHeight) return;
+  el.scrollTop += delta;
+  dragScrollRaf = requestAnimationFrame(dragScrollTick);
+}
+
+/** نزدیک لبهٔ بالا یا پایین ستون، فهرست خودش حرکت می‌کند تا مقصد دیده شود. */
+export function dragScrollColumn(el: HTMLElement | null, clientY: number) {
+  dragScrollEl = el;
+  dragScrollY = clientY;
+  if (!dragScrollRaf) dragScrollRaf = requestAnimationFrame(dragScrollTick);
+}
+
+export function stopDragScroll() {
+  dragScrollEl = null;
+  if (dragScrollRaf) cancelAnimationFrame(dragScrollRaf);
+  dragScrollRaf = 0;
+}
+
 export function moveStageToIndex(
   stages: PipelineStage[],
   stageId: string,

apps/web/src/views/LeadBoardView.vue

@@ -32,7 +32,7 @@ import {
 import { api } from '@/lib/api';
 import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
 import { canManageSettings } from '@/lib/roles';
-import { pointerDropIndex } from '@/lib/pipeline-board';
+import { dragScrollColumn, pointerDropIndex, stopDragScroll } from '@/lib/pipeline-board';
 import { useAuthStore } from '@/stores/auth';
 import type { LeadBoardColumnDto, LeadDto, LeadStageDto } from '@mento/shared';
 
@@ -62,6 +62,8 @@ const addUnqualified = ref(false);
 const deleteTarget = ref<LeadStageDto | null>(null);
 const moveConfirm = ref<{ stageIds: string[]; message: string } | null>(null);
 const draggingId = ref<string | null>(null);
+const insertAt = ref<number | null>(null);
+const bodyEls = new Map<string, HTMLElement>();
 const dropStageId = ref<string | null>(null);
 /** بعد از درگ، کلیک باز شدن جزئیات را یک فریم نادیده بگیر */
 let suppressCardClick = false;
@@ -468,17 +470,44 @@ function onDragStart(lead: LeadDto, event: DragEvent) {
   if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
 }
 
+function setBodyEl(stageId: string, el: unknown) {
+  if (el instanceof HTMLElement) bodyEls.set(stageId, el);
+  else bodyEls.delete(stageId);
+}
+
+function clearDragUi() {
+  insertAt.value = null;
+  stopDragScroll();
+}
+
+function slotStyle(active: boolean, collapseGap = false) {
+  return {
+    height: active ? '36px' : '0px',
+    marginTop: !active && collapseGap ? '-12px' : '0',
+    borderRadius: `${token.value.borderRadius}px`,
+    background: active ? token.value.colorPrimaryBg : 'transparent',
+    outline: active ? `1px dashed ${token.value.colorPrimary}` : 'none',
+    outlineOffset: '-1px',
+    transition: 'height 180ms ease, margin-top 180ms ease, background 180ms ease',
+    overflow: 'hidden',
+    flexShrink: 0,
+  };
+}
+
 function onDragEnd() {
   draggingId.value = null;
   dropStageId.value = null;
+  clearDragUi();
   window.setTimeout(() => {
     suppressCardClick = false;
   }, 0);
 }
 
-function onDragOver(stageId: string, event: DragEvent) {
+function onDragOver(stageId: string, event: DragEvent, index?: number) {
   event.preventDefault();
   dropStageId.value = stageId;
+  dragScrollColumn(bodyEls.get(stageId) ?? null, event.clientY);
+  if (index != null) insertAt.value = index;
   if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
 }
 
@@ -487,8 +516,10 @@ async function onDrop(stageId: string, event: DragEvent, index?: number) {
   event.stopPropagation();
   const leadId =
     event.dataTransfer?.getData('text/plain') || draggingId.value || '';
+  const at = index ?? insertAt.value ?? undefined;
   draggingId.value = null;
   dropStageId.value = null;
+  clearDragUi();
   if (!leadId || moving.value) return;
 
   const fromCol = columns.value.find((c) =>
@@ -501,14 +532,14 @@ async function onDrop(stageId: string, event: DragEvent, index?: number) {
   if (!lead) return;
 
   const same = fromCol.stage.id === stageId;
-  if (same && index == null) return;
+  if (same && at == null) return;
   const without = (same ? fromCol.leads : target.leads).filter((l) => l.id !== leadId);
-  let insertAt = index == null || index < 0 ? 0 : index;
+  let insertIndex = at == null || at < 0 ? 0 : at;
-  if (same && index != null && index > fromIndex) insertAt -= 1;
+  if (same && at != null && at > fromIndex) insertIndex -= 1;
-  insertAt = Math.max(0, Math.min(insertAt, without.length));
+  insertIndex = Math.max(0, Math.min(insertIndex, without.length));
-  if (same && insertAt === fromIndex) return;
+  if (same && insertIndex === fromIndex) return;
   const nextLeads = [...without];
-  nextLeads.splice(insertAt, 0, { ...lead, stageId, stageName: target.stage.name });
+  nextLeads.splice(insertIndex, 0, { ...lead, stageId, stageName: target.stage.name });
 
   const prev = columns.value.map((c) => ({
     ...c,
@@ -533,7 +564,7 @@ async function onDrop(stageId: string, event: DragEvent, index?: number) {
   moving.value = true;
   error.value = '';
   try {
-    await api.patch(`/leads/${leadId}/move`, { stageId, position: insertAt });
+    await api.patch(`/leads/${leadId}/move`, { stageId, position: insertIndex });
   } catch {
     columns.value = prev;
     error.value = 'جابه‌جایی لید ناموفق بود.';
@@ -656,24 +687,34 @@ onMounted(load);
             </a-flex>
           </div>
 
-          <div :style="columnBodyStyle">
+          <div
+            :ref="(el) => setBodyEl(col.stage.id, el)"
+            :style="columnBodyStyle"
+          >
             <div
               v-for="(lead, index) in col.leads"
               :key="lead.id"
-              @dragover.prevent="onDragOver(col.stage.id, $event)"
+              @dragover.prevent="onDragOver(col.stage.id, $event, pointerDropIndex(index, $event))"
               @drop.stop="onDrop(col.stage.id, $event, pointerDropIndex(index, $event))"
             >
+            <div
+              :style="slotStyle(dropStageId === col.stage.id && insertAt === index)"
+              @dragover.stop.prevent="onDragOver(col.stage.id, $event, index)"
+              @drop.stop.prevent="onDrop(col.stage.id, $event, index)"
+            />
             <a-card
               hoverable
               :bordered="true"
               :body-style="cardBodyStyle"
               :style="{
                 cursor: 'pointer',
-                opacity: draggingId === lead.id ? 0.45 : 1,
+                opacity: draggingId === lead.id ? 0.4 : 1,
+                transform: draggingId === lead.id ? 'scale(0.98)' : 'none',
+                transition: 'opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease',
                 flexShrink: 0,
                 margin: 0,
                 background: token.colorBgContainer,
-                boxShadow: token.boxShadow,
+                boxShadow: draggingId === lead.id ? token.boxShadowSecondary : token.boxShadow,
               }"
               @click="openLead(lead)"
             >
@@ -804,6 +845,11 @@ onMounted(load);
               </a-flex>
             </a-card>
             </div>
+            <div
+              :style="slotStyle(dropStageId === col.stage.id && insertAt === col.leads.length, true)"
+              @dragover.stop.prevent="onDragOver(col.stage.id, $event, col.leads.length)"
+              @drop.stop.prevent="onDrop(col.stage.id, $event, col.leads.length)"
+            />
 
             <a-typography-text
               v-if="!col.leads.length"