使用vuedraggable实现拖拽
测试地址: https://jsfiddle.net/2wye5t3c/52/文档地址:https://www.npmjs.com/package/vuedraggable以数据驱动视图方式:根据girl数组中定义的value值来对应显示的div以及内容,根据isCheck值来定义初始化以及复选框操作来执行显示/隐藏。@import url("//unpkg.com/element-ui
·
测试地址: https://jsfiddle.net/2wye5t3c/52/
文档地址:https://www.npmjs.com/package/vuedraggable
以数据驱动视图方式:根据girl数组中定义的value值来对应显示的div以及内容,根据isCheck值来定义初始化以及复选框操作来执行显示/隐藏。
@import url("//unpkg.com/element-ui@2.4.6/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<script src="//unpkg.com/element-ui@2.4.6/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')
更多推荐
已为社区贡献16条内容
所有评论(0)