github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-25 13:38:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix table row and header dragging (#4721)

Browse Source
This commit is contained in:
Nitwel
2021-03-29 16:14:36 +02:00
committed by GitHub
parent 70b15eef46
commit fdbddd0b71
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/components/v-table/table-header/table-header.vue
View File

@@ -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;

2
app/src/components/v-table/table-row/table-row.vue
View File

@@ -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>