Vue拖拽插件：vuedraggable

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

第二步：引入这个组件
import起这个名字，用别的也行但是后面的HTML也需要用这个
然后创建logs1234这四个塑料袋，相当于把四个西瓜分别放到这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>

http://www.itxst.com/vue-draggable/tutorial.html