diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue index 9fd8ed9c0f..f04524d135 100644 --- a/packages/frontend/src/pages/settings/emoji-picker.vue +++ b/packages/frontend/src/pages/settings/emoji-picker.vue @@ -123,7 +123,10 @@ import MkEmoji from '@/components/global/MkEmoji.vue'; import MkFolder from '@/components/MkFolder.vue'; const pinnedEmojisForReaction = ref(deepClone(defaultStore.state.reactions)); +const isPinnedEmojisForReactionDragging = ref(false); + const pinnedEmojis = ref(deepClone(defaultStore.state.pinnedEmojis)); +const isPinnedEmojisDragging = ref(false); const emojiPickerScale = computed(defaultStore.makeGetterSetter('emojiPickerScale')); const emojiPickerWidth = computed(defaultStore.makeGetterSetter('emojiPickerWidth')); @@ -140,6 +143,13 @@ dragAndDrop({ draggable: (el: HTMLElement) => { return !el.classList.contains('no-drag'); }, + onDragstart: () => { + isPinnedEmojisForReactionDragging.value = true; + }, + onDragend: () => { + isPinnedEmojisForReactionDragging.value = false; + defaultStore.set('reactions', pinnedEmojisForReaction.value); + }, }); dragAndDrop({ @@ -149,6 +159,13 @@ dragAndDrop({ draggable: (el: HTMLElement) => { return !el.classList.contains('no-drag'); }, + onDragstart: () => { + isPinnedEmojisDragging.value = true; + }, + onDragend: () => { + isPinnedEmojisDragging.value = false; + defaultStore.set('pinnedEmojis', pinnedEmojis.value); + }, }); const removeReaction = (reaction: string, ev: MouseEvent) => remove(pinnedEmojisForReaction, reaction, ev); @@ -229,12 +246,14 @@ function getHTMLElement(ev: MouseEvent): HTMLElement { } watch(pinnedEmojisForReaction, () => { + if (isPinnedEmojisForReactionDragging.value) return; defaultStore.set('reactions', pinnedEmojisForReaction.value); }, { deep: true, }); watch(pinnedEmojis, () => { + if (isPinnedEmojisDragging.value) return; defaultStore.set('pinnedEmojis', pinnedEmojis.value); }, { deep: true,