【表格行列拖拽】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 } }, }
本文暂时没有评论，来添加一个吧(●'◡'●)