moveable position is wrong

Environments

• Framework name: vue3-moveable
• Framework version: 0.1.0
• Moveable Component version:
• Testable Address(optional):

Description

<div ref="panelContainerRef" class="panel-container"  style="position: relative; left: 0; top: 0">
            <div
              ref="panelCanvasRef"
              style="position: relative"
            >
              <div class="custom-target" style="width: 200px; height: 200px; background-color: red"></div>
              <moveable :target="target"></moveable>
            </div>
</div>

target = document.querySelector('.custom-target')

When I set position: relative , the moveable position did not match the element

is there any vue3 demo? thanks

[ChenWeihua123]

just like this and it’s amazing

<template>
  <v-moveable
    ref="moveableRef"
    v-bind="moveableState"
    @dragStart="onDragStart"
    @drag="onDrag"
    @resize="onResize"
    @resizeEnd="onResizeEnd"
    :container="container"
    :rootContainer="rootContainer"
  ></v-moveable>
</template>
<script lang="ts">
import { useStore } from '@/store';
import { computed, defineComponent, onMounted, PropType, reactive, ref } from 'vue';
import VMoveable, { MoveableProps, OnDrag, OnResize } from 'vue3-moveable';

export default defineComponent({
  components: { VMoveable },
  props: {
    selectedTargets: {
      type: Array as PropType<HTMLElement[]>,
      default: () => [],
    },
    zoom: {
      type: Number,
      default: 1,
    },
  },
  setup(props) {
    const store = useStore();
    const moveableRef = ref<VMoveable>();

    const zoom = computed(() => 1 / store.state.editor.scale);
    const select = computed(() => store.state.editor.select);
    const moduleTargets = computed(() => store.state.editor.moduleTargets);
    const selectedTargets = computed(() =>
      select.value
        .map(id => {
          return moduleTargets.value.get(id);
        })
        .filter(Boolean),
    );
    const target = ref<HTMLElement[]>([]);
    const moveableState = reactive<MoveableProps>({
      className: 'svt-moveable',
      draggable: true,
      resizable: true,
      // dragArea: true,
      origin: false,
      pinchable: true,
      zoom: zoom as unknown as number,
      throttleResize: 1,
      throttleDrag: 1,
      target: selectedTargets as unknown as HTMLElement[],
      // target: target as unknown as HTMLElement[],
    });
    const container = ref<HTMLElement | null>(document.querySelector('.panel-container'));
    const rootContainer = ref<HTMLElement | null>(document.body);

    setTimeout(() => {
      target.value = [document.querySelector('.custom-target') as HTMLElement];
    }, 2000);

    const onDragStart = () => {
      console.log('dragStart');
    }
    const onDrag = ({ transform, target, translate }: OnDrag) => {
      target.style.transform = transform;
    };
    const onResize = ({ target, width, height, drag }: OnResize) => {
      target.style.width = `${width}px`;
      target.style.height = `${height}px`;
      target.style.transform = drag.transform;
    };
    const onResizeEnd = () => {
      store.commit('editor/setRefresh');
    };

    onMounted(() => {
      console.log('moveableRef: ', moveableRef.value);
      console.log('moveableRef: ', moveableRef.value!.$_moveable.dragStart);
    });

    const getMoveable = () => {
      return moveableRef.value!.$_moveable;
    };

    return {
      moveableRef,
      onDrag,
      onResize,
      moveableState,
      container,
      rootContainer,
      zoom,
      onResizeEnd,
      getMoveable,
      onDragStart
    };
  },
});
</script>
<style lang="scss" scoped></style>

[ChenWeihua123]

I see, I have time to try again