可以拖拽的树形表格

前几天在吹逼群里见到一个问题很有意思，

渲染一个树状结构，节点可以拖拽，实现以下特性
0.节点可以展开/收缩
1.将S从上/下方拖过上一个节点T的中位线时，S节点占位移动到T节点的位置。
2.将S节点拖入T节点20%-50%或50%-80%位置区间，但未穿过50%时，如果停留时间超过0.5秒，则将S节点加入T的子节点，并展开T节点。
3.当用户释放正在拖拽的S节点时，调整节点从属关系。
要求所有视觉由流畅的动画表现。
请梳理其中数据流关系。

自己试着实现了一下

题目给了一个效果，如下

自己实现了一下，效果如下

• 没有过多的修改 dome 只用 css 简单做了一下移动样式的变化
• 比较麻烦的就是不同的移动场景要分开处理
  具体的代码实现： https://codepen.io/fengmumu1/pen/aboNwWd