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

Vue+SortableJS上下拖拽排序

概述

sortableJS是一个非常功能强大的JavaScript 拖拽库,支持各种自定义的拖拽排序、上下排序、左右排序,树形结构拖拽排序,甚至支持跨元素排序拖拽,是个狠角色。
另外基于原生HTML5中的拖放API开发,使用很方便,触屏设备和大部分浏览器的兼容性支持也不错,值得推荐。

官网和Demo演示:http://www.sortablejs.com/

安装(二选一)

  1. npm install sortablejs --save // npm安装
  2. bower install --save sortablejs // bower安装

引入使用

  1. <template>
  2. <div ref="dragTable" class="sort-box">
  3. <div v-for="(item, index) in list" :key="index" class="list">
  4. {{item.name}}
  5. </div>
  6. </div>
  7. </template>
  8. <script>
  9. import Sortable from 'sortablejs'
  10. export default {
  11. data() {
  12. return {
  13. list: [
  14. { name: '排序1' },
  15. { name: '排序2' },
  16. { name: '排序3' }
  17. ],
  18. sortable: null,
  19. oldList: [],
  20. newList: []
  21. }
  22. },
  23. methods: {
  24. sortFn () {
  25. const el = document.querySelectorAll('.sort-box')[0]
  26. this.sortable = Sortable.create(el, {
  27. setData: function(dataTransfer) {
  28. dataTransfer.setData('Text', '')
  29. },
  30. onEnd: evt => {
  31. const targetRow = this.list.splice(evt.oldIndex, 1)[0]
  32. this.list.splice(evt.newIndex, 0, targetRow)
  33. const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
  34. this.newList.splice(evt.newIndex, 0, tempIndex)
  35. }
  36. })
  37. }
  38. }
  39. }
  40. </script>
  41. <style scoped>
  42. .list{
  43. height: 40px;
  44. line-height: 40px;
  45. text-align: center;
  46. }
  47. </style>
读后有收获可以支付宝请作者喝咖啡
下一篇 >
文章评论
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部