From 4047452b0f023bcd29deab1f2e3c94650a093f44 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Wed, 23 Jul 2025 18:26:20 +0300 Subject: [PATCH] feat(views/board): drag works in between columns --- .../view_widgets/board_view/drag_handler.ts | 52 +++++++------------ .../widgets/view_widgets/board_view/index.ts | 5 -- 2 files changed, 18 insertions(+), 39 deletions(-) diff --git a/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts b/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts index 19653ce89..6116a147c 100644 --- a/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts +++ b/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts @@ -62,7 +62,6 @@ export class BoardDragHandler { $dragHandle.on("dragend", () => { $columnEl.removeClass("column-dragging"); - this.$container.find('.board-column').removeClass('column-drag-over'); this.context.draggedColumn = null; this.context.draggedColumnElement = null; this.cleanupColumnDropIndicators(); @@ -109,7 +108,6 @@ export class BoardDragHandler { cleanup() { this.cleanupAllDropIndicators(); this.$container.find('.board-column').removeClass('drag-over'); - this.$container.find('.board-column').removeClass('column-drag-over'); this.context.draggedColumn = null; this.context.draggedColumnElement = null; this.cleanupGlobalColumnDragTracking(); @@ -285,33 +283,16 @@ export class BoardDragHandler { originalEvent.dataTransfer.dropEffect = "move"; } - if (this.context.draggedColumn !== columnValue) { - $columnEl.addClass("column-drag-over"); - } - } - }); - - $columnEl.on("dragleave", (e) => { - if (this.context.draggedColumn && !this.context.draggedNote) { - const rect = $columnEl[0].getBoundingClientRect(); - const originalEvent = e.originalEvent as DragEvent; - const x = originalEvent.clientX; - const y = originalEvent.clientY; - - if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) { - $columnEl.removeClass("column-drag-over"); - } + // Don't highlight columns - we only care about the drop indicator position } }); $columnEl.on("drop", async (e) => { if (this.context.draggedColumn && !this.context.draggedNote) { e.preventDefault(); - $columnEl.removeClass("column-drag-over"); - if (this.context.draggedColumn !== columnValue) { - await this.handleColumnDrop($columnEl, columnValue); - } + // Use the drop indicator position to determine where to place the column + await this.handleColumnDrop(); } }); } @@ -499,31 +480,30 @@ export class BoardDragHandler { } } - private async handleColumnDrop($targetColumnEl: JQuery, targetColumnValue: string) { + private async handleColumnDrop() { if (!this.context.draggedColumn || !this.context.draggedColumnElement) { return; } try { - // Get current column order from the DOM - const currentOrder = Array.from(this.$container.find('.board-column')).map(el => - $(el).attr('data-column') - ).filter(col => col) as string[]; - - console.log("Current order:", currentOrder); - console.log("Dragged column:", this.context.draggedColumn); - console.log("Target column:", targetColumnValue); - // Find the drop indicator to determine insert position const $dropIndicator = this.$container.find(".column-drop-indicator.show"); if ($dropIndicator.length > 0) { + // Get current column order from the DOM + const currentOrder = Array.from(this.$container.find('.board-column')).map(el => + $(el).attr('data-column') + ).filter(col => col) as string[]; + + console.log("Current order:", currentOrder); + console.log("Dragged column:", this.context.draggedColumn); + let newOrder = [...currentOrder]; // Remove dragged column from current position newOrder = newOrder.filter(col => col !== this.context.draggedColumn); - // Determine insertion position based on drop indicator + // Determine insertion position based on drop indicator position const $nextColumn = $dropIndicator.next('.board-column'); const $prevColumn = $dropIndicator.prev('.board-column'); @@ -533,21 +513,25 @@ export class BoardDragHandler { // Insert before the next column const nextColumnValue = $nextColumn.attr('data-column'); insertIndex = newOrder.indexOf(nextColumnValue!); + console.log("Inserting before column:", nextColumnValue, "at index:", insertIndex); } else if ($prevColumn.length > 0) { // Insert after the previous column const prevColumnValue = $prevColumn.attr('data-column'); insertIndex = newOrder.indexOf(prevColumnValue!) + 1; + console.log("Inserting after column:", prevColumnValue, "at index:", insertIndex); } else { // Insert at the beginning insertIndex = 0; + console.log("Inserting at the beginning"); } // Insert the dragged column at the determined position - if (insertIndex >= 0) { + if (insertIndex >= 0 && insertIndex <= newOrder.length) { newOrder.splice(insertIndex, 0, this.context.draggedColumn); } else { // Fallback: insert at the end newOrder.push(this.context.draggedColumn); + console.log("Fallback: inserting at the end"); } console.log("New order:", newOrder); diff --git a/apps/client/src/widgets/view_widgets/board_view/index.ts b/apps/client/src/widgets/view_widgets/board_view/index.ts index cadb3d38e..1bdf7d21e 100644 --- a/apps/client/src/widgets/view_widgets/board_view/index.ts +++ b/apps/client/src/widgets/view_widgets/board_view/index.ts @@ -106,11 +106,6 @@ const TPL = /*html*/` transition: opacity 0.2s ease, transform 0.2s ease; } - .board-view-container .board-column.column-drag-over { - border-color: var(--main-text-color); - background-color: var(--hover-item-background-color); - } - .board-view-container .board-column h3 input { background: transparent; border: none;