Initial position

I’m creating an editor, so I need to load my elements to the page dynamically. So the question is how properly to set up an initial moveable position. By default, all elements are not selected. Vue template:

<template>
    <div
            :id="id"
            :style="{width, height, opacity, transform}"
            :class="['moveable pix-object', {selected}]"
            @mousedown="initMoveable"
            v-click-outside="vcoConfig"
    >
        <slot/>
    </div>
</template>

const frame = {
    translate: [0, 0],
    rotate: 0
};

...
methods: {
    setRotate() {
        const [a, b] = this.matrix
        if (a && b) {
            let radians = Math.atan2(+b, +a)
            if (radians < 0) {
                radians += (2 * Math.PI)
            }
            frame.rotate = radians * (180 / Math.PI)
         }
   },
   setTranslate() {
       const [, , , , tx, ty] = this.matrix
       if (tx && ty) {
           this.$set(frame, 'translate', [+tx, +ty])
       }
    },
    initFrame() {
        this.setRotate()
        this.setTranslate()
    },
    setStyle(target) {
        const {translate: [translateX, translateY], rotate} = frame
        target.style.transform
                    = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg)`
    },
    initMoveable(e) {
        this.selected = true
        const container = document.getElementById('page-0')
        if (!this.moveable) {
            const {offsetHeight, offsetWidth} = container
            this.moveable = new Moveable(container, {
                ...this.$props,
                verticalGuidelines: [0, offsetHeight / 2, offsetHeight],
                horizontalGuidelines: [0, offsetWidth / 2, offsetWidth],
                target: this.$el,
                container
             })
             this.moveable.dragStart(e)
        } else {
             this.moveable.target = this.$el
             // it doesn't work without a timer
             setTimeout(() => {
                 this.moveable.dragStart(e)
             })
        }
    },
    handleDragStart({set}) {
        set(this.frame.translate)
    },
    handleDrag({target, beforeTranslate}) {
        this.frame.translate = beforeTranslate
        this.setStyle(target)
    },
},
mounted() {
    this.initFrame()
}

The problem is that beforeTranslate is always [0, 0] and handleDragStart never fired if I manually trigger the drag event (dragStart) and the element always moves to the [0, 0].

[daybrush]

@outOFFspace

movable 0.10.0 is released.

Try it like this:

moveable.setState({
  target: this.$el,
}, () => {
 movable.dragStart(e);
});

thank you 😃

[osbre]

I’m not sure is it a good solution, but setting left and top CSS attributes as the initial position works for me.

I use it this way:

moveable.on("drag", ({target, left, top, right, bottom}) => {
    target.style.left = `${left}px`;
    target.style.top = `${top}px`;
})