diff --git a/src/components/Draggable.ts b/src/components/Draggable.ts index 197ebcf..c55c87c 100644 --- a/src/components/Draggable.ts +++ b/src/components/Draggable.ts @@ -1,4 +1,4 @@ -import { h, defineComponent, PropType, isVue3, Ref } from 'vue-demi'; +import { h, defineComponent, PropType, isVue3, Ref, onUpdated } from 'vue-demi'; import { DraggableOptions } from '../utils/types'; import useDraggable from '../hooks/useDraggable'; import { templateRef } from '@vueuse/core'; @@ -87,7 +87,7 @@ const Draggable = defineComponent({ setup(props, { slots, emit }) { const init = (targets: Ref[]) => { targets.forEach((target) => { - const { onDrag, onDragStart, onDragStop, onTransformed } = useDraggable(target, props); + const { onDrag, onDragStart, onDragStop, onTransformed, updateState } = useDraggable(target, props); onDrag((dragEvent) => { emit('move', dragEvent); @@ -104,6 +104,10 @@ const Draggable = defineComponent({ onTransformed((transformEvent) => { emit('transformed', transformEvent); }); + + onUpdated(() => { + updateState(props); + }); }); }; diff --git a/src/components/DraggableCore.ts b/src/components/DraggableCore.ts index d107814..3e39caa 100644 --- a/src/components/DraggableCore.ts +++ b/src/components/DraggableCore.ts @@ -1,5 +1,5 @@ -import { h, defineComponent, PropType, isVue3 } from 'vue-demi'; -import {DraggableCoreOptions, DraggableOptions} from '../utils/types'; +import { h, defineComponent, PropType, isVue3, onUpdated } from 'vue-demi'; +import { DraggableCoreOptions, DraggableOptions } from '../utils/types'; import useDraggableCore from '../hooks/useDraggableCore'; import { templateRef } from '@vueuse/core'; @@ -55,7 +55,7 @@ const DraggableCore = defineComponent({ setup(props, { slots, emit }) { const target = templateRef('core-target', null); - const { onDrag, onDragStart, onDragStop } = useDraggableCore(target, props); + const { onDrag, onDragStart, onDragStop, updateState } = useDraggableCore(target, props); onDrag((dragEvent) => { emit('move', dragEvent); @@ -69,6 +69,10 @@ const DraggableCore = defineComponent({ emit('stop', dragStopEvent); }); + onUpdated(() => { + updateState(props); + }); + if (isVue3) { return () => { if (slots.default) return slots.default()?.map((node) => h(node, { ref: 'core-target' }));