基于vue的移动端Icon图标拖拽（改变定位和使用transform）

功能介绍：

1、icon拖拽位移 

2、边界判断 （仅在可视区域滑动，防止Icon丢失）

3、吸边处理（仅处理X轴方向）

开发遇到的问题：

1、ios 上拖拽时，body跟随滚动：

     解决办法：在move的时候，阻止事件默认行为

2、使用transform的时候，再次拖拽出现icon不跟随鼠标现象导致icon不可控

      解决办法：transform的值基于DOM的起点计算的，在touchend的时候，重新渲染DOM的位置，并清空transform的值

3、在touchend使用原生JS获取moveDiv.style.left的值得时候，获取不到。

      解决办法：把原生的定位属性（top,left）写在行内。

4、在另一个项目中使用JQ获取transform的值，和原生获取transform的值不同。

      jq:

     $('div').css("transform");   

      得到 matrix(1, 0, 0, 1, 0, -78);       

     $('div').css("transform").replace(/[^0-9\-,]/g,'')

      得到：1, 0, 0, 1, 0, -78;

     原生JS：

     moveDiv.style.transform      得到： "translate(101px, -82px)"

      moveDiv.style.transform.match(/(-?\d+\.?\d+)/g)[0]       得到：[101,-82]

方法一、通过不断的改变left 和top值实现拖拽，（适合使用PC，移动端低端机不流畅）

Icon.vue代码如下：

方法二、通过实现拖拽，（相对比较流畅,推荐使用）

Icon.vue代码如下：