关于使用draggable.js在vue中做出限制区域点击字体图标实现可拖转列表的功能实现

第一步：npm i draggable.js下载下来；

第二步：在组件中引入draggable.js

第三步：引入实现可拖转列表

最后参数阐释：

1. v-model绑定的list是可拖拽列表的数组数据；

2. handle的值是Icon的class的名字实现是点击字体图标可拖拽，点击其他位置不可拖拽；

3. @end=''方法是拖拽结束后调用的，可以把改变后的list传给后端；

4. filterelist数据是列表上面有搜索框可以实现输入实时过滤展示列表的数据，不需要可以直接写list；

5. :class动态更改选中行的样式；

6.onClickDrag是点击行的事件；

7.Poptip是iview自带的提示框，里面可以做增删改查的工作。

8.dictSet是列表控制功能（启用、编辑、删除），每次操作完都要重新隐藏弹框

样式如下：点击左边字体图标可以拖转行，点击中间是onClickDrag事件，点击最右边三个点是打开Poptip气泡提示进行增删改查。