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>