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

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

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

HTML要素編

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

コード

template

<template>
<div id="app">
    <vue-draggable-resizable 
        v-for="item in shapes"
        :key="item._id" 
        :x="item.x" 
        :y="item.y"      
        :w="item.w" 
        :h="item.h" 
        :draggable="item.draggable" 
        class="item" 
        :style="item.fillStyle"
    >
        <div>
            <h1>{{ item.heading }}</h1>
            <p>
                {{ item.text }}
            </p>
        </div>
    </vue-draggable-resizable>
</div>
</template>

script

<script>
Vue.component( 'vue-draggable-resizable', VueDraggableResizable );
    
export default {
    data() {
        return {
            // setting for Rect object
            shapes: [
                {
                    _id: '0',
                    x: 10,
                    y: 10,
                    w: 150,
                    h: 150,
                    fillStyle: 'background: white;',
                    draggable: true,
                    heading: 'Sample 1',
                    text: 'Text'
                },
                {
                    _id: '1',
                    x: 200,
                    y: 200,
                    w: 250,
                    h: 250,
                    fillStyle: 'background: white;',
                    draggable: true,
                    heading: 'Sample 2',
                    text: 'Text'
                }
            ]
        };
    }
};
</script>

SVG要素編

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

コード

template

<template>
<vue-draggable-resizable 
        v-for="item in shapes"
        :key="item._id" 
        :x="item.x" 
        :y="item.y"      
        :w="item.w" 
        :h="item.h" 
        :draggable="item.draggable" 
    >
        <svg xmlns="http://www.w3.org/2000/svg" 
            :width="item.w + 'px'" 
            :height="item.h + 'px'" 
            :viewBox="'0 0 ' + item.w + ' ' + item.h" 
        >
            <rect
                x="0"
                y="0"
                :width="item.w"
                :height="item.h"
                :fill="item.fill" 
            />
        </svg>
    </vue-draggable-resizable>
</template>

script

<script>
Vue.component( 'vue-draggable-resizable', VueDraggableResizable );
    
export default {
    data() {
        return {
            // setting for Rect object
            shapes: [
                {
                    _id: '0',
                    x: 10,
                    y: 10,
                    w: 150,
                    h: 150,
                    fill: 'white',
                    draggable: true
                },
                {
                    _id: '1',
                    x: 200,
                    y: 200,
                    w: 250,
                    h: 250,
                    fill: 'white',
                    draggable: true
                }
            ]
        };
    }
};
</script>

ドラッグ&ドロップで移動できる範囲を指定する

parent: trueにすると、移動できる範囲が、親要素の大きさまでになります。
親要素の大きさを超えて移動はできません。

このデモでは、左上の「sample 1」をparent: trueに、 右下の「sample 2」をparent: falseにしてあります。

コード

template

<template>
<div id="app">
    <div id="stage">
        <vue-draggable-resizable 
            v-for="item in shapes"
            :key="item._id" 
            :x="item.x" 
            :y="item.y"      
            :w="item.w" 
            :h="item.h" 
            :draggable="item.draggable" 
            :parent="item.parent" 
            class="item" 
            :style="item.fillStyle"
        >
            <div>
                <h1>{{ item.heading }}</h1>
                <p>
                    {{ item.text }}
                </p>
            </div>
        </vue-draggable-resizable>
    </div>
</div>
</template>

script

<script>
Vue.component( 'vue-draggable-resizable', VueDraggableResizable );
    
export default {
    data() {
        return {
            // setting for Rect object
            shapes: [
                {
                    _id: '0',
                    x: 10,
                    y: 10,
                    w: 150,
                    h: 150,
                    fillStyle: 'background: white;',
                    draggable: true,
                    parent: true,
                    heading: 'Sample 1',
                    text: 'parent: true'
                },
                {
                    _id: '1',
                    x: 200,
                    y: 200,
                    w: 250,
                    h: 250,
                    fillStyle: 'background: white;',
                    draggable: true,
                    parent: false,
                    heading: 'Sample 2',
                    text: 'parent: false'
                }
            ]
        };
    }
};
</script>

style

<style>
#app {
    width: 100%;
    height: 100vh;
    background: #ECEFF1;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stage {
    background: #CFD8DC;
    width: 500px;
    height: 500px;
}
</style>

メモ