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

VueでHTML・SVG要素をドラッグ&ドロップで移動するサンプルです。
「vue-moveable」を使用したバージョンです。

ライブラリを使用していないバージョンはこちら

HTML要素編

HTML要素をドラッグ&ドロップで移動します。

コード

template

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

script

<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>

SVG要素編

SVG要素をドラッグ&ドロップで移動します。

コード

template

<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

<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>

メモ

ドラッグ&ドロップできる範囲を指定するやり方がわかりませんでした。。
プロパティーなどたくさんありそうなので、時間がある時に詳しく見てみたいと思います。

ドラッグ&ドロップ以外にも、リサイズや回転などもできます。