前端怎么实现类似ps图层列表的功能？！

目前大四在公司实习，然后领导让我用现有的前端知识做一款demo，实现类似动态壁纸制作的功能，功能需求是添加图片，添加动画特效，鼠标特效，以及音乐和其它图片还能通过一个类似ps图层列表的功能去改变canvas层级，但是目前做到现在，有一个问题还无法解决，就是我现在有多个canvas，我现在是通过按钮点击更改canvas层级（就是点击按钮之后，就把对应的图层放到最上层），但是他们要求是像ps那样，上下拖动图层列表的元素去更改对应的图层的层级，我在网上翻了很多，但是都只有在一个canvas里把元素存为数组的方法在单一canvas上的操作，虽然我也尝试过，把所有特效都放在一起，但是会出现闪屏，因为他们都会定时清理画布，而且导致添加的图片也会受到影响，所以我只能将js特效，都应用在不同的canvas上，所以我没法用单一画布的方法去更改图层，他们都是把拖动元素和图片放在一个数组里，去改变数组的index，但是我不行，我是通过方法，点击按钮添加对应的js特效，然后就会覆盖下层的图片！所以我应该怎么实现类似ps图层列表的功能，拖动元素去改变对应的canvas的层级

你好，我是问答小助手。为了技术专家团更好地为您解答问题，烦请您补充下（1）问题背景详情，（2）您想解决的具体问题，（3）问题相关图片。便于技术专家团更好地理解问题，并给出解决方案。

您可以点击问题下方的【编辑】，进行补充修改问题。

建议改成单画板

 我是这样想的 首先 你一个canvas 对应的是一个 图片 然后在右侧会对应的图层列表里 当选中这个图层时候 可以拿到他的层级    当我们移动图层的时候  画布上的图片 对应 层叠 我觉得其实就是改变z-index属性  所以当我们在图层列表移动图层的时候 其实就是 要要判断 他是向上移动 还是向下移动 如果向上 那么就要知道 他上面图层的z-index是多少 在他的基础上把当前移动的图层 z-index属性+1 如果向下的时候 就相反

如果还有别的问题 可以进来我们讨论下