自定义表单组件面板排序处理

• 背景：开发自定义表单面板排序较复杂。有以下几种场景需要处理

• 可以参看的文献。draggable中文文档

• 最后会说一下排序逻辑

  1. 组件新增。将左侧的组件拖拽至右侧设计面板。除了需要将组件自定义保存至后台。另外还需要判单组件被拖拽的位置。更新组件排序字段。
  2. 组件移动位置。设计面板中组件存在多个。可以手动拖拽组件至不同位置，此时需要处理排序。
  3. 在以上两种情况下。组件可能被拖拽至设计面板最上部、最下部和中间位置。此时的更新也是不同的。
  4. 组件复制。在创建组建后可以调用通新增组件时相同的方法

• 新增时：组件处理逻辑截图组件新增处理关键部分。

  1. onComponentAdded是draggable标签的@add事件
  2. 组件被拖拽到设计面板后触发新增和sort排序操作
     
     

• 移动时：

  1. 可以判断事件的类型。事件被触发时已经带着类型，是一个对象。
  2. 对象中包含newIndex和oldIndex 就可以查询前后组件的顺序了。
  3. 在dragabble标签中使用的事件为@change方法
     
     

• 复制时：

  1. 复制功能是通过按钮触发
     
  2. 添加的事件
     
     

排序逻辑

• 组件新增时后端判断若是首个组件。sort = 65535或者其他较大的数值
• 若不是首个取最大的sort。通过查询sort倒序查询获取，设置后进行保存入库
• 前端收到保存成功消息后会调用公共的排序方法
• 会使用redis缓存对新增的排序进行记录。若之前已经存在，会累加固定数值对redis缓存进行更新。
• 拖拽、复制：
  1. 采用事件监听的方式。获取当前被拖拽对象的前后组件元素的序号。调用sort方法更新
  2. 处理排序的后端逻辑。若是将组件放在第一个位置。sort计算=第二个组件sort值/2。若是放在组件中，前后都含有组件。会将前后组件sort相加/2。若是放在最后。会用固定值累加，也就是获取redis中保存的最大值后累加固定数值，通常数值会非常打。