这是今天看了老吴发布了一个拖拽插件！使用非常简单。但是为了更快的理解。我就不用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>