ImgDragSort.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <a-card>
  3. <draggable @end="end" :options="{animation: 300}" v-model="dataSource" style="display: inline-block">
  4. <template v-for="(data,index) in dataSource">
  5. <div style="float: left;width:150px;height:150px;margin-right: 10px;margin: 0 8px 8px 0;" :key="index">
  6. <div
  7. style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
  8. <img style="width: 100%;" :src="data.filePath" preview="index">
  9. </div>
  10. </div>
  11. </template>
  12. <a-button @click="sureChange" type="primary" style="margin-top: 115px">确定</a-button>
  13. </draggable>
  14. <br/>
  15. <a-row>
  16. <a-col :span="12">
  17. <p>拖拽前json数据:</p>
  18. <textarea rows="25" style="width: 780px">{{ oldDateSource }}</textarea>
  19. </a-col>
  20. <a-col :span="12">
  21. <p>拖拽后json数据:</p>
  22. <textarea rows="25" style="width: 780px">{{ newDateSource }}</textarea>
  23. </a-col>
  24. </a-row>
  25. </a-card>
  26. </template>
  27. <script>
  28. import draggable from 'vuedraggable'
  29. import ARow from 'ant-design-vue/es/grid/Row'
  30. import ACol from 'ant-design-vue/es/grid/Col'
  31. export default {
  32. name: 'ImgDragSort',
  33. components: {
  34. ACol,
  35. ARow,
  36. draggable
  37. },
  38. data() {
  39. return {
  40. description: '图片拖拽排序',
  41. spinning: false,
  42. //数据集
  43. dataSource: [
  44. {
  45. id: '000',
  46. sort: 0,
  47. filePath: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg'
  48. },
  49. {
  50. id: '111',
  51. sort: 1,
  52. filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg'
  53. },
  54. {
  55. id: '222',
  56. sort: 2,
  57. filePath: 'https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3660968530,985748925&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=5e64af964be378c6c2a3b0acc65dfe24'
  58. },
  59. {
  60. id: '333',
  61. sort: 3,
  62. filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=889120611,3801177793&fm=27&gp=0.jpg'
  63. },
  64. {
  65. id: '444',
  66. sort: 4,
  67. filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2445468140,2491956848&fm=27&gp=0.jpg'
  68. }
  69. ],
  70. oldDateSource: [],
  71. newDateSource: [],
  72. }
  73. },
  74. created() {
  75. this.oldDateSource = this.dataSource;
  76. },
  77. methods: {
  78. end: function (evt) {
  79. console.log("拖动前的位置" + evt.oldIndex);
  80. console.log("拖动后的位置" + evt.newIndex);
  81. },
  82. sureChange() {
  83. for (var i = 0; i < this.dataSource.length; i++) {
  84. this.dataSource[i].sort = i;
  85. }
  86. this.newDateSource = this.dataSource;
  87. }
  88. }
  89. }
  90. </script>
  91. <style scoped>
  92. </style>