当前位置:首页 > 前端 > Vue.js

Vue awe-dnd拖拽排序插件

Vue.js 2019-08-16

  最近有个测试朋友在学前端,问Vue有没有拖拽排序的现成插件不想重新造轮子。找了下发现还真有现成的,简单整理了下分享出来!
alt="Vue awe-dnd拖拽排序插件"

安装

  1. npm install awe-dnd --save

引入

到项目的main.js中,使用Vue.use引入

  1. import VueDND from 'awe-dnd'
  2. Vue.use(VueDND)

API

Vue指令的方式调用

  1. v-dragging="{ item: color, list: colors, group: 'color' }"

vue文件中的使用

  1. <template>
  2. <div class="color-list">
  3. <div
  4. class="color-item"
  5. v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
  6. :key="color.text"
  7. >{{color.text}}</div>
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. colors: [{
  15. text: "Aquamarine"
  16. }, {
  17. text: "Hotpink"
  18. }, {
  19. text: "Gold"
  20. }, {
  21. text: "Crimson"
  22. }, {
  23. text: "Blueviolet"
  24. }, {
  25. text: "Lightblue"
  26. }, {
  27. text: "Cornflowerblue"
  28. }, {
  29. text: "Skyblue"
  30. }, {
  31. text: "Burlywood"
  32. }]
  33. }
  34. },
  35. mounted () {
  36. this.$dragging.$on('dragged', ({ value }) => {
  37. console.log(value.item)
  38. console.log(value.list)
  39. console.log(value.otherData)
  40. })
  41. this.$dragging.$on('dragend', () => {
  42. })
  43. }
  44. }
  45. </script>

组件参数Arguments

名称 类型 默认值 说明
item Object - 每一个可拖拽的对象
list Array - 可拖拽对象的数组
group String - 这个是dragging list的unique key
< 上一篇 下一篇 >
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部