使用vuedraggable實現拖拽

測試地址： https://jsfiddle.net/2wye5t3c/52/

文檔地址：https://www.npmjs.com/package/vuedraggable

以數據驅動視圖方式：根據girl數組中定義的value值來對應顯示的div以及內容，根據isCheck值來定義初始化以及複選框操作來執行顯示/隱藏。

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>

<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>

 <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>

<script src="//unpkg.com/[email protected]/lib/index.js"></script>

<div id="app">

<draggable  v-model="girl" :options="{group:'people'}">

<!-- <el-row > -->

<template v-for="(element,index) in girl">

  <el-col :span="7" :offset="1">

  <div v-if="element.isCheck">

  <div v-if="element.value==1">

  <div style="width:100%;height:100%;background-color:red;">haldjal <br>asdah</div>

  </div>

   <div v-if="element.value==2">

 <div style="width:100%;height:100%;background-color:#bbddff;">ccsdaa <br>asdaskdh</div>

  </div>

   <div v-if="element.value==3">

 <div style="width:100%;height:100%;background-color:blue;">ddahsdkjash <br>asdlkjl</div>

  </div>

  </div>

  </el-col>

  </template>

<!-- </el-row> -->

</draggable>

{{girl}}

<template v-for="g in girl">

    <el-checkbox v-model="g.isCheck">{{g.value}}-{{g.isCheck}}</el-checkbox>

  </template>

</div>



js部分內容：

var Main = {

  data() {

    return {

	girl:[{value:'1',isCheck:true},{value:'2',isCheck:false},{value:'3',isCheck:true}],

    }

  },

  components:{

  	

  }

}

var Ctor = Vue.extend(Main)

new Ctor().$mount('#app')