Vue拖拽插件:vuedraggable

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

第二步:引入这个组件
import起这个名字,用别的也行可是后面的HTML也须要用这个
而后建立四个塑料袋,至关于把四个西瓜分别放到这4个袋里面
components别忘了加进去,光引入不显示有用?npm

<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:小盒子其实就是个人四言绝句flex

<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>
相关文章
相关标签/搜索