拖拽效果实现思路

最近给同事帮忙，要实现一个拖拽效果，先来看一下最后的实现效果预览：html

实现这个效果，主要须要实现如下一些功能：ide

1. 从左边拖到右边大框过程当中要可以实时预览；spa

2. 从左边拖到右边大框时要进行范围限制；3d

3. 从左边拖到右边大框时要能自动对齐右边大框里的小格子，即实现磁吸的功能；htm

4. 右边大框里的格子画布实际比那个框要大，会有横向与纵向的滚动条，存在滚动距离（下图的X2和Y2）时对拖动对齐会有影响，须要仔细计算相关因素；blog

5. 已经拖动到右边的小格子在右边框在大框里的拖动实现；iframe

以上5条主要的难点是在第3条和第4条，老是计算不许致使拖动达不到理想的效果，最后镇定思痛画了下图，成功的解决该问题，但愿对你们有所参考。class