功能介绍:
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代码如下:
<