table表格拖拽

table表格拖拽(拖拽列)

1.新建js文件(directive)注册自定义指令

// 设置样式
function setStyle($tr,finallIndex,callback1,callback2){
    // callback1:默认样式设置,callback2:拖动的时候样式
  for(let tri = 0;tri<$tr.length;tri++){
    // 遍历tr,将th和td放到最终的位置上
    const itemtr = $tr[tri];
    if(itemtr.getElementsByTagName('th').length){
   
      const $ths = itemtr.getElementsByTagName('th');
      for(let thi = 0;thi<$ths.length;thi++){
   
        if(callback1){
   callback1($ths[thi])}
      }
      if(callback2){
   callback2($ths[finallIndex])}
    }
    if(itemtr.getElementsByTagName('td').length){
   
      const $tds = itemtr.getElementsByTagName('td');
      for(let tdi = 0;tdi<$tds.length;tdi++){
   
        if(callback1){
   callback1($tds[tdi])}
      }
      if(callback2){
   callback2($tds[finallIndex])}
    }
  }
}
// 自定义指令
export default (Vue)=>{
   
  Vue.directive("slldrag",{
   
    bind:(el)=> {
   
      let op = el;  //获取当前元素

      op.onmousedown<