iview 实现表格限制区域点击小图标实现拖拽改变表格行的位置功能教程

iview中有拖拽属性draggable和配合的@on-drag-drop事件，但是没有具体的示例和教程，所以我自己研究并成功实现。

代码如下：

1. 给table表格加上draggable和@on-drag-drop；

2. 使用template加上用来点击的拖拽字体图标，通过@mouseenter="handleMouseDown"和@mouseleave="handleMouseUp"来改变draggable1的值为false或true，这是用来把拖拽功能限制在字体图标上；

3. on-drag-drop绑定的onDragDrop事件拖拽排序松开时触发，返回置换的两行数据索引，通过splice更改tableData1的值的位置来实时更改表格行的位置，在通过循环改变tableData1的displayNo的值，这个值是后端排序需要的值。把拖拽后的数据传给后端最终实现表格拖拽功能。

实现效果图：