From fdbddd0b715e1f6dfcc6dfd38fd2eed95d5bdf57 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 29 Mar 2021 16:14:36 +0200
Subject: [PATCH] fix table row and header dragging (#4721)

---
 .../components/v-table/table-header/table-header.vue | 12 ++++++------
 app/src/components/v-table/table-row/table-row.vue   |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/src/components/v-table/table-header/table-header.vue b/app/src/components/v-table/table-header/table-header.vue
index d155715499..99ac17e5a5 100644
--- a/app/src/components/v-table/table-header/table-header.vue
+++ b/app/src/components/v-table/table-header/table-header.vue
@@ -34,7 +34,7 @@
 					class="resize-handle"
 					v-if="showResize"
 					@click.stop
-					@mousedown="onResizeHandleMouseDown(header, $event)"
+					@pointerdown="onResizeHandleMouseDown(header, $event)"
 				/>
 			</th>
 
@@ -103,8 +103,8 @@ export default defineComponent({
 		const dragStartWidth = ref<number>(0);
 		const dragHeader = ref<Header | null>(null);
 
-		useEventListener(window, 'mousemove', throttle(onMouseMove, 40));
-		useEventListener(window, 'mouseup', onMouseUp);
+		useEventListener(window, 'pointermove', throttle(onMouseMove, 40));
+		useEventListener(window, 'pointerup', onMouseUp);
 
 		return {
 			changeSort,
@@ -181,7 +181,7 @@ export default defineComponent({
 			emit('toggle-select-all', !props.allItemsSelected);
 		}
 
-		function onResizeHandleMouseDown(header: Header, event: MouseEvent) {
+		function onResizeHandleMouseDown(header: Header, event: PointerEvent) {
 			const target = event.target as HTMLDivElement;
 			const parent = target.parentElement as HTMLTableHeaderCellElement;
 
@@ -191,7 +191,7 @@ export default defineComponent({
 			dragHeader.value = header;
 		}
 
-		function onMouseMove(event: MouseEvent) {
+		function onMouseMove(event: PointerEvent) {
 			if (dragging.value === true) {
 				const newWidth = dragStartWidth.value + (event.pageX - dragStartX.value);
 				const currentHeaders = clone(props.headers);
@@ -253,8 +253,8 @@ export default defineComponent({
 			display: flex;
 			align-items: center;
 			height: 100%;
-			font-weight: 600;
 			color: var(--foreground-normal-alt);
+			font-weight: 600;
 
 			> span {
 				overflow: hidden;
diff --git a/app/src/components/v-table/table-row/table-row.vue b/app/src/components/v-table/table-row/table-row.vue
index edfee9c774..9de875c165 100644
--- a/app/src/components/v-table/table-row/table-row.vue
+++ b/app/src/components/v-table/table-row/table-row.vue
@@ -8,7 +8,7 @@
 			'--table-row-line-height': 1,
 		}"
 	>
-		<td v-if="showManualSort" class="manual cell">
+		<td v-if="showManualSort" class="manual cell" @click.stop>
 			<v-icon name="drag_handle" class="drag-handle" :class="{ 'sorted-manually': sortedManually }" />
 		</td>
 		<td v-if="showSelect" class="select cell" @click.stop>