[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>
メモ
ドラッグ&ドロップできる範囲を指定するやり方がわかりませんでした。。
プロパティーなどたくさんありそうなので、時間がある時に詳しく見てみたいと思います。
ドラッグ&ドロップ以外にも、リサイズや回転などもできます。