Vue拖拽插件vuedraggable

这是今天看了老吴发布了一个拖拽插件！使用非常简单。但是为了更快的理解。我就不用 Bootstrap 来自适应了。
第一步：首先安装这个插件
cnpm i vuedraggable -S

第二步：引入这个组件
import 起这个名字，用别的也行但是后面的 HTML 也需要用这个
然后创建四个塑料袋，相当于把四个西瓜分别放到这 4 个袋里面
components 别忘了加进去，光引入不显示有用？

<script>
import draggable from 'vuedraggable';
export default {data() {
        return {logs1: [{ name: '床前明月光'}, 
                    {name: '地上鞋两双'}, 
                    {name: '举头戴绿帽'}, 
                    {name: '低头撕裤裆'}],
            logs2: [],
            logs3: [],
            logs4: []};
    },
    components: {draggable}
};
</script>

第三步：开始制作样式
Row: 就是快读百分百，而且里面的的盒子能横平填充
Box: 我说手的大塑料袋
Box>div: 里面会自动生成这个 Div 有他的原因是这个塑料袋是没开封的，你加一个高度这个袋子才能撑开
box: 小盒子其实就是我的四言绝句

<div class="Row">
            <div class="Box">
                <draggable :list="logs1" group="tasks">
                     <div v-for="(mx, index) in logs1" :key="index" class="box">
                         {{mx.name}}
                     </div>
                </draggable>
            </div>
            <div class="Box">
                <draggable :list="logs2" group="tasks">
                     <div v-for="(mx, index) in logs2" :key="index" class="box">
                         {{mx.name}}
                     </div>
                </draggable>
            </div>
            <div class="Box">
                <draggable :list="logs3" group="tasks">
                     <div v-for="(mx, index) in logs3" :key="index" class="box">
                         {{mx.name}}
                     </div>
                </draggable>
            </div>
            <div class="Box">
                <draggable :list="logs4" group="tasks">
                     <div v-for="(mx, index) in logs4" :key="index" class="box">
                         {{mx.name}}
                     </div>
                </draggable>
            </div>
</div>

最后一步：CSS 样式

<style>
.Row {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.box {
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
}
.Box {
    background: #ccc;
    width: 25%;
    padding: 15px;
    border: 1px solid #000;
}

.Box > div {height: 100%;}
</style>