代码太脏了，重构吧！

上一篇笔记中：进一步完善通过边界偏移拖拽位移图片（上传图片、多图位移），完全是打草稿的心态，代码太脏了，意难平，所以抽空重构一下吧，权当提升一下js的水平。

存在的问题

1、上一篇文章的视频中，拖拽图片的存在明显的丢失焦点的现象：图片停住了，脱离的鼠标的控制，原因是鼠标事件绑定在上导致的，渲染图片的速度有概率跟不上拖动鼠标的速度；

2、虽然效果是有了，但逻辑很混乱，像极了隔夜菜倒在一起炖了一锅，如果再写100行代码，估计都不知道从哪里下手了，后期更难以迭代;

3、太多循环。

调整的方向

1、鼠标事件不再绑定，改为绑定对象；

2、该抽象的抽象，该封装的封装，封装的函数或类放到一个文件中；文件中只需体现文件上传的函数和鼠标监听事件

3、大致的效果为（伪代码演示）：

重构后

1、内容

2、内容

经测试，暂未发现鼠标失焦现象。不过也可能又埋下了些坑，到目前为止，操作的对象都是img对象，估计后面得在img外边加一层div，操作的目标是div，然后用事件流传递到img上，不排除这种可能。前端，活太细了！