vue 中表格拖拽排序

妖狐艹你老母 2022-11-29 13:12 324阅读 0赞

### vue+iview 表格 拖拽排序，代码如下 ###

### js 代码如下 ###

onDragDrop(first, end) {
          //转成int型，方便后续使用
          first = parseInt(first);
          end = parseInt(end);
    
          let tmp = this.data[first];
    
          if (first < end) {
            for (var i = first + 1; i <= end; i++) {
              this.data.splice(i - 1, 1, this.data[i]);
            }
            this.data.splice(end, 1, tmp);
          }
    
          if (first > end) {
            for (var i = first; i > end; i--) {
              this.data.splice(i, 1, this.data[i - 1]);
            }
            this.data.splice(end, 1, tmp);
          }
       },

### vue+其他列表拖拽排序 awe-dnd ###

npm install awe-dnd --save

//main.js
    
    import VueDND from 'awe-dnd'
    
    Vue.use(VueDND)

### js代码： ###

<script>
    export default {
      data () {
        return {
            colors: [{
                text: "Aquamarine"
            }, {
                text: "Hotpink"
            }, {
                text: "Gold"
            }, {
                text: "Crimson"
            }, {
                text: "Blueviolet"
            }, {
                text: "Lightblue"
            }, {
                text: "Cornflowerblue"
            }, {
                text: "Skyblue"
            }, {
                text: "Burlywood"
            }]
        }
      },
    
      mounted() {
           this.$dragging.$on('dragged', ({ value }) => {
          		console.log(value.item)
    	      	console.log(value.list)
        	})
      } 
    }
    </script>
    
    <template>
      <div class="color-list">
          <div
              class="color-item"
              v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
              :key="color.text"
          >{
       {color.text}}</div>
      </div>
    </template>