Предыдущий код позволяет изменять размер строк таблицы vuetify. К сожалению, с помощью sortable: true событие щелчка из div "hanlde" всплывает до строки заголовка и запускает функцию toggleSort из заголовков таблицы vuetify по умолчанию. Я не хочу переопределять слот заголовков, поэтому не могу использовать @click.self = "toggleSort", а добавление e.stopPropagation() к addEventListener не работает. Есть идеи?
Вы можете заметить проблему, когда перетаскиваете курсор достаточно далеко, чтобы вывести курсор за пределы дескриптора div, прежде чем отпустить кнопку мыши. Вот видео: https://thewikihow.com/video_WsLPF-lpdDc
🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.
Просто временно отключите сортировку при перетаскивании:
--- a/app.vue
+++ b/app.vue
@@ -9,20 +9,21 @@
<script setup lang = "ts">
import { ref, nextTick } from 'vue'
+ const sortable = ref(true)
const headers = ref([
{
title: 'Dessert (100g serving)',
align: 'end',
- sortable: true,
+ sortable,
value: 'name',
width: undefined,
maxWidth: undefined,
},
- { title: 'Calories', sortable: true, align: 'end', value: 'calories' },
- { title: 'Fat (g)', sortable: true, align: 'end', value: 'fat' },
- { title: 'Carbs (g)', sortable: true, align: 'end', value: 'carbs' },
- { title: 'Protein (g)', sortable: true, align: 'end', value: 'protein' },
- { title: 'Iron (%)', sortable: true, align: 'end', value: 'iron' },
+ { title: 'Calories', sortable, align: 'end', value: 'calories' },
+ { title: 'Fat (g)', sortable, align: 'end', value: 'fat' },
+ { title: 'Carbs (g)', sortable, align: 'end', value: 'carbs' },
+ { title: 'Protein (g)', sortable, align: 'end', value: 'protein' },
+ { title: 'Iron (%)', sortable, align: 'end', value: 'iron' },
])
const desserts = ref([
{
@@ -188,6 +189,8 @@
divEvent: MouseEvent | undefined
div.addEventListener('mousedown', function (e) {
+ sortable.value = false
+
divEvent = e
curCol = (e.target as HTMLDivElement).parentElement as HTMLTableColElement
pageX = e.pageX
@@ -252,6 +255,8 @@
divEvent = undefined
}
})
+
+ setTimeout(() => sortable.value = true, 0)
}
function createDiv(height: number): HTMLDivElement {