vue2 拖动排序 vuedraggable组件的实现
2019-08-08 10:44
573 查看
一、安装插件
npm install -D vuedraggable
二、在需要排序的界面中引入组件
<script> import draggable from 'vuedraggable' export default { name: 'HelloWorld', components: { draggable },
三、在模板中使用
<draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move"> <div v-for="(item, index) in groups" :key=index> item {{item}} </div> </draggable>
四、实现change、start、end、move方法,v-model绑定的数据就是排序后的数据,可以传递给后台修改数据库数据
methods: { change (event) { console.log('change', event) }, start (event) { console.log('start', event) }, end (event) { console.log('end', event, this.groups) }, move (event, orgin) { console.log('move', event, orgin) } }
五、完整代码,参考网址
<template> <div> 排序 <draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move"> <!-- <transition-group> --> <div v-for="(item, index) in groups" :key=index> item {{item}} </div> <!-- </transition-group> --> </draggable> </div> </template><script> import draggable from 'vuedraggable' export default { name: 'HelloWorld', components: { draggable },data () { return { groups: [ 1, 2, 3, 4, 5 ] } },methods: { change (event) { console.log('change', event) }, start (event) { console.log('start', event) }, end (event) { console.log('end', event, this.groups) }, move (event, orgin) { console.log('move', event, orgin) } }} </script> <style scoped> </style>
https://github.com/SortableJS/Vue.Draggable
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue2.0使用vuedraggable实现组件拖动排序
- easyui Draggable组件实现拖动效果
- easyui Draggable组件实现拖动效果
- 利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
- vue2组件实现懒加载浅析
- 实现拖动排序
- Vue2实现子组件改变父子组件的数据
- android之实现SeekBar拖动组件
- jquery实现拖动排序
- 使用jquery-sortable交互工具和acts_as_list rubygem实现页面拖动排序
- JQuery EasyUI---Draggable( 拖动) 组件
- Windows下组件拖动实现(Panel为例)
- vue draggable resizable 实现可拖拽缩放的组件功能
- Vue.js实现可排序的表格组件功能示例
- android之实现SeekBar拖动组件
- Elementui表格组件+sortablejs实现行拖拽排序的示例代码
- jQuery拖动布局实现排序结果同步数据库
- DataGrid客户端排序和通过鼠标拖动来实现多选
- jQuery-ui插件sortable实现自由拖动排序
- react.js组件实现拖拽复制和可排序的示例代码