实现原理:监听鼠标的按下(onmousedown)、抬起(onmouseup)事件进行处理;
1.在A表格上监听onmousedown, 按下时改变鼠标样式,并且标识leftTableDown=true
leftTable.onmousedown = function(event) { // 按下鼠标时，初始化处理 that.leftTableDown = true document.body.style.cursor = `url(${that.imgUrl}) 12 12,pointer` }
2.在b表格上监听onmouseup, 在函数中判断 是否在A表格按下过鼠标
rightTable.onmouseup = function(event) { that.rightTableUp = true document.body.style.cursor = 'auto' if (that.leftTableDown) { const pathDom = event.path.find(x => { if (x.localName === 'tr') return x }) if (!pathDom) { that.$message.error('请拖放在表格行上') return } const rowIndex = pathDom.rowIndex that.$message.success(`落在了第: ${rowIndex + 1}行!`) } }
3. 在A 表格上按下鼠标时改变鼠标的样式 document.body.style.cursor = url(${that.imgUrl}) 12 12,pointer
4.什么时候让鼠标恢复原始样式呢? 答案:鼠标抬起时
document.onmouseup = function(event) { document.body.style.cursor = 'auto' }
<template> <div> <div class="headBox"> <h1>把左边勾选行拖入右边</h1> </div> <div class="box"> <div> <el-table id="table1" draggable="false" border style="width: 390px" :data="table1" ref='leftTable' row-key="id" > <el-table-column type="selection" width="55" > </el-table-column> <el-table-column type="index" width="50" > </el-table-column> <el-table-column prop="bill_no" label="编号" width="180" > </el-table-column> <el-table-column prop="department" label="部门" width="180" > </el-table-column> </el-table> </div> <div> <el-table draggable="false" border style="width: 390px" ref='rightTable' :data="table2" row-key='id' > <el-table-column type="index" width="50" > </el-table-column> <el-table-column prop="name" label="姓名" width="180" > </el-table-column> <el-table-column prop="age" label="年龄" width="180" > </el-table-column> </el-table> </div> </div> </div></template><script>import Sortable from 'sortablejs'export default { components: { Sortable }, data() { return { imgUrl: require('../assets/right.png'), table1: [ { bill_no: '1', 'department': '财务0', id: 1 }, { bill_no: '2', 'department': '财务1', id: 2 } ], table2: [ { name: '张三', age: 18, id: 7 }, { name: '李四', age: 19, id: 8 }, { name: '王五', age: 20, id: 9 }, { name: '赵四', age: 21, id: 10 } ], leftTableDown: false, rightTableDown: false, rightTableUp: false } }, mounted() { const leftTable = this.$refs.leftTable.$el const rightTable = this.$refs.rightTable.$el const that = this rightTable.onselectstart = function() { return false } leftTable.onselectstart = function() { return false } leftTable.onmousedown = function(event) { // 按下鼠标时，初始化处理 that.leftTableDown = true document.body.style.cursor = `url(${that.imgUrl}) 12 12,pointer` } rightTable.onmousedown = function(event) { that.rightTableDown = true that.leftTableDown = false } document.onmouseup = function(event) { document.body.style.cursor = 'auto'
that.leftTableDown = false
} rightTable.onmouseup = function(event) { that.rightTableUp = true document.body.style.cursor = 'auto' if (that.leftTableDown) { const pathDom = event.path.find(x => { if (x.localName === 'tr') return x }) if (!pathDom) { that.$message.error('请拖放在表格行上') return } const rowIndex = pathDom.rowIndex that.$message.success(`落在了第: ${rowIndex + 1}行!`) } } }, methods: { }}</script><style scoped>.headBox{ margin-top: 30px; font-size: 40px; color: red;}.box { margin: 100px; display: flex; justify-content: space-around;}</style>
