縦横可変グリッドを作成したい


#1

Vue.js自体初心者なのですが
例えば掲示板みたいなものを作成する際に
投稿フォームと一覧の幅をドラッグで可変出来るような仕組みを作成したいのですが
わかりやすいソースなどありますでしょうか?

https://muunyblue.github.io/0b01c7d68feb22290f3b0da91bef689d.html
イメージは上記サイトの拡張をせずリサイズが行えればといった感じです


#2

1.$ npm install awe-dnd --save

2.main. jsでは、Vue. Ueを通じてプラグインを導入する
import VueDND from 'awe-dnd'
Vue.use(VueDND)
3.使用する
<script>

export default {

data () {

return {

colors: [{

text: "Aquamarine"

}, {

text: "Hotpink"

}, {

text: "Gold"

}, {

text: "Crimson"

}, {

text: "Blueviolet"

}, {

text: "Lightblue"

}, {

text: "Cornflowerblue"

}, {

text: "Skyblue"

}, {

text: "Burlywood"

}]

}

}

}

</script>
<template>

<div class = "color-list" >

<div

class = "color-item"

v- for = "color in colors" v-dragging= "{ item: color, list: colors, group: 'color' }"

:key= "color.text"

>{{color.text}}</div>

</div>

</template>

4.vue2.0
<div class = "color-list" >

<div

class = "color-item"

v- for = "color in colors" v-dragging= "{ item: color, list: colors, group: 'color' }"

:key= "color.text"

>{{color.text}}</div>

</div>
5.vue1.0

<div class = "color-list" >

<div

class = "color-item"

v- for = "color in colors" v-dragging= "{ item: color, list: colors, group: 'color', key: color.text }"

track-by= "text"

>{{color.text}}</div>

</div>
<div class = "color-list" >

<div

class = "color-item"

v- for = "color in colors" v-dragging= "{ item: color, list: colors, group: 'color', otherData: otherData }"

:key= "color.text"

>{{color.text}}</div>

</div>

export default {

mounted () {

this .$dragging.$on( 'dragged' , ({ value }) => {

console.log(value.item)

console.log(value.list)

console.log(value.otherData)

})

this .$dragging.$on( 'dragend' , () => {

})

}

}