[Vue + svg.draggable] SVG要素をドラッグ&ドロップで移動する

VueでSVG要素をドラッグ&ドロップで移動するサンプルです。
「SVG.js」と「svg.draggable.js」を使用したバージョンです。

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

コード

template

<template>
<div id="app">
    <svg id="svg" style="background: #ECEFF1;"></svg>
</div>
</template>

script

<script>
export default {
    data() {
        return {
            // setting for Rect object
            shapes: [
                {
                    _id: '0',
                    x: 10,
                    y: 10,
                    w: 150,
                    h: 150,
                    fill: 'red',
                    svgjs: null
                },
                {
                    _id: '1',
                    x: 200,
                    y: 200,
                    w: 250,
                    h: 250,
                    fill: 'blue',
                    svgjs: null
                }
            ],
        };
    },
    mounted: function () {
        this.$nextTick( function () {
            // SVG init
            let svg = SVG( 'svg' ).size( 500, 500 );
            
            // Rect object init
            this.shapes.forEach( function ( item ) {
                // draw Rect object
                item.svgjs = svg.rect( item.w, item.h ).attr( { fill: item.fill } ).x( item.x ).y( item.y );
                // Set drag&drop ( svg.draggable.js )
                item.svgjs.draggable();
            });
        });
    }
};
</script>

メモ

「SVG.js」は、いろいろ便利なのですが、Vue+SVGの場合、直接SVG書いていろいろやったほうがやりやすいかなと思いました。