element 表格左右拖动

element 表格左右拖动

创建tabelMove js

在src下创建js文件tabelMove.js

 具体实现代码
 import Vue from 'vue'

Vue.directive('tabelMove', { // 指令的定义 bind: function (el, binding, vnode) { var odiv = el // 获取当前表格元素 // el.style.cursor = 'pointer'

  el.querySelector('.el-table .el-table__body-wrapper').style.cursor = 'pointer'
console.log('wosh',el.querySelector('.el-table .el-table__body-wrapper'))
  var mouseDownAndUpTimer = null
  var mouseOffset = 0
  var mouseFlag = false
  odiv.onmousedown = (e) => {
    const ePath = composedPath(e)
    // 拖拽表头不滑动
    if (ePath.some(res => { return res && res.className && res.className.indexOf('el-table__header') > -1 })) return

    if (e.which !== 1) return

    mouseOffset = e.clientX
    mouseDownAndUpTimer = setTimeout(function () {
      mouseFlag = true
    }, 80)
  }
  odiv.onmouseup = (e) => {
    setTimeout(() => {
      // vnode.context:当前的vm实例 -- 渲染表格
      vnode.context.$refs.orderTable && vnode.context.$refs.orderTable.doLayout()
    }, 200)
    if (mouseFlag) {
      mouseFlag = false
    } else {
      clearTimeout(mouseDownAndUpTimer) // 清除延迟时间
    }
  }
  odiv.onmouseleave = (e) => {
    setTimeout(() => {
      // vnode.context:当前的vm实例 --  渲染表格
      vnode.context.$refs.orderTable && vnode.context.$refs.orderTable.doLayout()
    }, 200)
    mouseFlag = false
  }
  odiv.onmousemove = (e) => {
    if (e.which !== 1) return

    const divData = odiv.querySelector('.el-table .el-table__body-wrapper')
    if (mouseFlag && divData) {
      // 设置水平方向的元素的位置
      divData.scrollLeft -= (-mouseOffset + (mouseOffset = e.clientX))
    }
  }
  // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
  odiv.ondragstart = (e) => {
    e.preventDefault()
  }
  odiv.ondragend = (e) => {
    e.preventDefault()
  }
  // 点击复制
  odiv.onclick = (e) => {
    // 复制内容
    
  }
  // 是否选中文字
  odiv.onselectstart = () => {
    return true
  }
  function composedPath(e) {
    // 存在则直接return
    if (e.path) { return e.path }
    // 不存在则遍历target节点
    let target = e.target
    e.path = []
    while (target.parentNode !== null) {
      e.path.push(target)
      target = target.parentNode
    }
    // 最后补上document和window
    e.path.push(document, window)
    return e.path
  }
}
})

在main.js 引入

    import  'you路径/tabekmove.js'

在模版中使用

     <div class="table-container"  v-table-drag-select="{
    tableRef: 'dataTable',
    enableClickCopy: true,
    dragSensitivity: '1.5'
  }">
  
// 需要的话可以搭配上一篇的 表格内容自定义
  <el-table>**需要的内容**</el-table>

 </div>
 

** 实现左右拖动、移动到文字内容复制，移出拖动