el-table拖拽功能实现（3种详细解释）

1.el-table自带的列宽拖拽

如图：下方为el-table的属性之一，在下面代码所示的位置加上boder即可，把鼠标放在每个列之间，会出现拖拽的鼠标样式，可以调整列的宽度（但是仅限调整列宽）

border

是否带有纵向边框

boolean

—

false

2.实现左右table宽度拖拽

在使用组件的时候，尽量不要修改他，而是通过控制外面的盒子进行控制

2.1 html主要分为3部分（如图）：

2.2 css样式：（样式自行设置）

    ul,li{
      list-style: none;
      display: block;
      margin:0;
      padding:0;
    }
    .lrbox{
      width:100%;
      height: 48%;
      margin: 1% 0px;
      overflow:hidden;
      display: flex;
    }
    .left{
      width:calc(50% - 20px); 
 //注意  calc() 来动态设置宽高，在表达式中运算符的前后必须要有空格
      height:100%;
    }
    .resize {
        cursor: col-resize;
        background-color: #d6d6d6;
        border-radius: 5px;
        margin-top: -10px;
        width: 10px;
        background-size: cover;
        background-position: center;
        /*z-index: 99999;*/
        font-size: 32px;
        color: white;
    }
    .resize:hover {
        color: #4444
    }  
    .mid{
      width:50%;
      height:100%;

    }

2.3 下面是js代码：

多个地方使用可以进行封装混入，提高复用率，减少代码冗余

    dragControlWidth(divWidth，resizeWidth) {  //（最小宽度int，拖动条宽度int）
     //获取
          var resize = document.getElementsByClassName('resize');
          var left = document.getElementsByClassName('left');
          var right = document.getElementsByClassName('mid');
          var box = document.getElementsByClassName('lrbox');
    //对其进行循环，可用于多个左右控制
          for (let i = 0; i < resize.length; i++) {
         //鼠标按下事件
            resize[i].onmousedown = function (e) {
              var startX = e.clientX;    //指针相对于浏览器页面（或客户区）的水平坐标
              resize[i].left = resize[i].offsetLeft;   //返回当前元素相对于 offsetParent 节点左边界的偏移像素值
         //鼠标移动事件
              document.onmousemove = function (e) {
                var endX = e.clientX;
                var moveLen = resize[i].left + (endX - startX); 
                var maxT = box[i].clientWidth - resize[i].offsetWidth; 
        //设置极值范围
                if (moveLen < divWidth) {
                  moveLen = divWidth; 
                }
                if (moveLen > maxT - divWidth){
                  moveLen = maxT  - divWidth;
                }  
       
                resize[i].style.left = moveLen; 
       //用for循环是因为相较消耗小
                for (let j = 0; j < left.length; j++) {
                  left[j].style.width = moveLen + 'px';
                  right[j].style.width = (box[i].clientWidth - moveLen - resizeWidth) + 'px';
                }
              }
          //鼠标抬起事件
              document.onmouseup = function (e) {
          //结束处理（清除事件）
                document.onmousemove = null;
                document.onmouseup = null;
                resize[i].releaseCapture && resize[i].releaseCapture();

              }
              resize[i].setCapture && resize[i].setCapture(); 
              return false;
            }
          }
   
        },

 上方提到了releaseCapture和setCapture ，下面进行简单的解释下呐，嘿嘿

2.4 releaseCapture和setCapture 介绍：

setCapture:

将鼠标事件锁定在指定的元素上，当元素捕获了鼠标事件后，该事件只能作用在当前元素上。(上面代码的事件是作用中间的拖动条，拖动条的样式可以自己通过css进行美化，搞出符合自己的想法或者符合需求即可)

使用：

currElement.setCapture(boolean)，用于设置是否捕获其子元素的鼠标事件

注意：

1.setCapture不可作用于键盘等其它事件，只作用于鼠标事件；

2.setCapture该法是IE浏览器专有；

3.并且只能捕作用在这几个事件上：

onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout

releaseCapture：

可以为指定的元素解除事件锁定，与上面的相反，一个锁定一个解锁。

（需要注意使用的是两者必须成对呈现，因为鼠标消息都发给上面锁定的这个窗口，直到调用ReleaseCapture或者调用SetCapture设置另一个窗口为止。）

另外，还有一个GetCapture，他是专门用来获取是哪个窗口捕获了鼠标事件

2.5 使用了releaseCapture和setCapture两次

还有重要的一点就是代码的后面使用了releaseCapture和setCapture两次

• 这行代码的目的是检查 resize[i] 元素是否支持 releaseCapture 方法，避免在不支持该方法的浏览器中引发错误。
• 如果 resize[i] 元素支持 releaseCapture 方法，则调用一次 releaseCapture() 来释放鼠标捕获。
• 使用两次的目的是处理特定情况下的浏览器兼容性问题。在某些浏览器中，需要多次调用 releaseCapture 才能完全释放鼠标捕获。通过使用两次调用，可以确保在各种浏览器环境下都能正确地释放鼠标捕获。

3.利用第3方插件自由拖拽

 Sortable 是一个用于可重新排序的拖放列表的 JavaScript 库。

特征

• 支持触摸设备和现代浏览器（包括IE9）
• 可以从一个列表拖动到另一个列表或在同一列表中
• 移动项目时的 CSS 动画
• 支持拖动手柄和可选文本（比 voidberg 的 html5sortable 更好）
• 智能自动滚动
• 高级掉期检测
• 流畅的动画
• 多拖拽支持
• 支持 CSS 转换
• 使用原生 HTML5 拖放 API 构建

3.1效果图如下：

3.2使用 NPM 下包及引入：

也可以用pnpm，yarn下载依赖，下载慢可切换源

npm install sortablejs --save

导入到您的项目中：

import Sortable from 'sortablejs';

创建新实例
Sortable.create：HTMLElementObjectSortable  

3.3CDN：

 3.4代码举例：

3.4.1 使用el-table组件

3.4.2 自定义的数据：

为了演示造的数据，正常应该是调用接口获取数据的

3.6 具体官方文档请点击下方进行跳转：

https://www.npmjs.com/package/sortablejs#cdnhttps://www.npmjs.com/package/sortablejs#cdn