elementUI Table组件实现拖拽效果

矫情吗；* 2022-04-22 06:50 581阅读 0赞

### 背景 ###

使用`Element UI Table`\+`Vue`实现表格的拖拽。在`GitHub`上搜索了下发现[Sortable][]这款插件挺不错的，`Star14000+`，而且还支持[Vue][]等多种主流的前端框架，可谓是十分的强大。最重要的原因是，完全不依赖`JQ`。

[Vue.Draggable][]，`Vue`版本的`Sortable`。拖拽后能够使数据模型同步，完美兼容Vue的数据视图双向绑定。

**下面贴一下官方demo**  
![example.gif][]

看得出来真的很强大。数据实时的响应同步，结合Vue我们根本不需要对数据进行复杂的逻辑处理。

### 准备 ###

*  **安装依赖**

npm i -S vuedraggable

`vuedraggable`依赖[ Sortable.js][Sortable]，所以下载了`vuedraggable`，我们便可以直接引入`Sortable`使用`Sortable`的特性。  
`vuedraggable`是`Sortable`一种加强，实现组件化的思想，可以结合Vue，使用起来更方便。

*  **Sortable使用**
    
    在这里我们还是使用一句`Sortable`的构建方式
    
        import Sortable from 'sortablejs';
    
    导入`Sortable`类，创建拖拽函数
    
        drag() { 
                const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
                Sortable.create(el, { 
                    disabled: !this.enableDrag,
                    ghostClass: 'sortable-ghost',
                    setData: function(dataTransfer) { 
                        dataTransfer.setData('Text', '');
                    },
                    onEnd: (evt) => { 
         				
                    }
                });
            },
    
    我们在数据加载完成之后，就调用drag()方法来开启拖拽功能。  
    介绍下几个参数的作用：
    
     *  `el` 代表我们要侦听拖拽响应的`dom`对象
     *  `disabled` 是否开启拖拽
     *  `ghostClass` 拖拽时可以给加上样式
     *  `setData` 回调HTML5 DragEvent的dataTransfer\`对象，来设置显示的数据
     *  `onEnd` 结束拖拽后的回调函数，`evt`包含`oldIndex`，`newIndex`等一系列属性。
        
        [完整属性列表][Link 1]

### 演示 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NDQwODAz_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20181103002936721.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NDQwODAz_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20181103003003835.png]

[Sortable]: https://github.com/RubaXa/Sortable
[Vue]: https://cn.vuejs.org/
[Vue.Draggable]: https://github.com/SortableJS/Vue.Draggable
[example.gif]: /images/20220422/aec244febd824278b1207fd02b552d9c.png
[Link 1]: https://github.com/RubaXa/Sortable#options
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NDQwODAz_size_16_color_FFFFFF_t_70]: /images/20220422/1574c0c580644265b9853a55aeafa208.png
[20181103002936721.png]: /images/20220422/ac9e6201988d470888a459bdf968a197.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NDQwODAz_size_16_color_FFFFFF_t_70 1]: /images/20220422/8cb3cfd9224b48aab0b02ee9ef69f540.png
[20181103003003835.png]: /images/20220422/d628b8c8d39d4c75ab5347444dd6be80.png