这是今天看了老吴发布了一个拖拽插件!使用很是简单。可是为了更快的理解。我就不用Bootstrap来自适应了。
第一步:首先安装这个插件cnpm i vuedraggable -S
vue
第二步:引入这个组件
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>