[vue-moveable] ドラッグ＆ドロップで移動する

<template>
<div id="app">
    <moveable
        class="moveable"
        v-bind="moveable"
        @drag="handleDrag"
    >
        <span>Sample</span>
    </moveable>
</div>
</template>

<script>
const Moveable = window[ 'VueMoveable' ];
Vue.component( 'moveable', Moveable );
    
export default {
    data() {
        return {
            moveable: {
                draggable: true
            }
        };
    },
    methods: {
        handleDrag( { target, transform } ) {
            target.style.transform = transform;
        }
    }
};
</script>

<template>
<moveable
        class="moveable"
        v-bind="moveable"
        @drag="handleDrag"
    >
        <svg xmlns="http://www.w3.org/2000/svg" 
            width="200px" 
            height="200px" 
            viewBox="0 0 200 200" 
        >
            <rect
                x="0"
                y="0"
                width="200"
                height="200"
                fill="#fff"
            />
        </svg>
    </moveable>
</template>

<script>
const Moveable = window[ 'VueMoveable' ];
Vue.component( 'moveable', Moveable );
    
export default {
    data() {
        return {
            moveable: {
                draggable: true
            }
        };
    },
    methods: {
        handleDrag( { target, transform } ) {
            target.style.transform = transform;
        }
    }
};
</script>