vue拖拽--实现表格行和列的拖拽 [sortable.js]---元素拖拽【vuedraggable】--- 元素拖拽【vue-grid-layout】

【表格行列拖拽】vue+iview+sortable.js实现

安装依赖

cnpm install sortable.js --save

组件里头引入

import Sortable from 'sortablejs'

代码

mounted() {
    this.rowDrop()
    this.columnDrop()
  },
methods: {
  //行拖拽【iview组件】
  rowDrop() {
    const tbody = document.querySelector('.ivu-table-tbody')
    const that = this
    const len = that.tableDataList.length
    console.log(len)
    Sortable.create(tbody, {
      onEnd({ newIndex, oldIndex }) {
        const currRow = that.tableDataList.splice(oldIndex, 1)[0]
        that.tableDataList.splice(newIndex, 0, currRow)
        console.log(that.tableDataList)
      }
    })
  },
//列拖拽 【elment组件】
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.tableCols[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    },
}

 

---

 

【元素拖拽】vue拖拽 【vuedraggable】

安装依赖

cnpm i -S vuedraggable

组件里头引入

import vuedraggable from 'vuedraggable';

代码

vuedraggable

参考链接 vue draggable 与 vue-dragging

使用页面： 
export default {
    components:{
        draggable
     }，
    methods:{
     datadragEnd(){
        console.log(this.wallList);
      }     
    }
},
<draggable v-model="wallList" class="showWall" group="people" @update="datadragEnd" @start="drag=true" @end="drag=false">
    <div v-for="element in myArray" :key="element.id">{{element.name}}</div> 
</draggable>
注：update相关方法调用后list会自行更新;并支持过渡动画，并可以手动配置；

属性 事件 说明

forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；

 

---

 

【元素拖拽】vue-grid-layout [https://www.itxst.com/vue-grid-layout/attrs.html]

安装依赖

npm install vue-grid-layout --save

组件里头引入

import { GridLayout, GridItem } from 'vue-grid-layout'

代码

<grid-layout
    :col-num="12"
    :is-draggable="true" // 拖拽
    :is-resizable="true" // 大小变形
    :col-num="4" // 一行排4个块
    :layout.sync="areaList" // 数据集
    :responsive="false"
    :row-height="100"
     :margin="[10, 10]" // 块之间的间距
>
    <grid-item
        v-for="(item, indexVar) inareaList"
        :key="indexVar"
        :h="item.h"
        :i="item.i"
        class="grid-item-wrap"
        :static="item.static"
        :w="item.w"
        :x="item.x"
        :y="item.y"
    >
        <component :is="item.components" class="grid-item" />
         <!-- 没有组件引入，可以使用单独小方块 <div><div> -->
    </grid-item>
</grid-layout>

。。。。。。。

export default {
  components: {
    GridLayout,
    GridItem,
  },
  data() {
    return {
     areaList: [
        { x: 0, y: 0, w: 24, h: 6, i: '0', components: 'MapTable' },
        { x: 0, y: 0, w: 6, h: 4, i: '1', components: 'VDeviceBar' },
        { x: 1, y: 0, w: 6, h: 4, i: '2', components: 'VErrorDeviceList' },
        { x: 0, y: 0, w: 6, h: 4, i: '3', components: 'VHealthTrendLine' },
        { x: 1, y: 0, w: 6, h: 4, i: '4', components: 'VCompleteRateChart' }
      ],
      index: 0
    }
  },
}