Modal Drag Resize

A drag and resize modal example.

Here is a basic drag and resize modal example that using vue3-drag-resize.

Preview

Preview.vue
<script setup lang="ts">
import { ModalsContainer, useModal } from 'vue-final-modal'
const { open, destroy } = useModal({
keepAlive: true,
component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
})
onBeforeUnmount(() => {
destroy()
})
</script>
<template>
<VButton @click="() => open()">
Open Modal
</VButton>
<ModalsContainer />
</template>

<DragResizeModal> component

DragResizeModal.vue
<script setup lang="ts">
import { VueFinalModal } from 'vue-final-modal'
import VueDragResize from 'vue3-drag-resize'
const emit = defineEmits<{
(e: 'update:modelValue', modelValue: boolean): void
}>()
const width = ref(0)
const height = ref(0)
const top = ref(0)
const left = ref(0)
function dragResize(newRect) {
width.value = newRect.width
height.value = newRect.height
top.value = newRect.top
left.value = newRect.left
}
</script>
<template>
<VueFinalModal
display-directive="show"
background="interactive"
content-transition="vfm-fade"
:hide-overlay="true"
@update:model-value="val => emit('update:modelValue', val)"
>
<!-- in case you use Nuxt, make sure to wrap with `<ClientOnly>` -->
<!-- in case you don't use Nuxt, you don't need `<ClientOnly>` -->
<ClientOnly>
<VueDragResize
:is-active="true"
:w="200"
:h="200"
class="bg-primary-100 dark:bg-gray-800"
@resizing="dragResize"
@dragging="dragResize"
>
<h3>Hello World!</h3>
<p>{{ top }} х {{ left }} </p>
<p>{{ width }} х {{ height }}</p>
<button class="absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md " @pointerup="emit('update:modelValue', false)">
X
</button>
</VueDragResize>
</ClientOnly>
</VueFinalModal>
</template>