摘要:
近期有个项目需求,需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性, 所以想到HTML5中的`drag`事件, 但是发现移动端 `android & IOS` 并不支持 `drag` 事件。所有新事物的产生都不是偶然, 所以决定自己去实现一个页面元素的拖动。
实现页面元素的主要思路,是通过监听事件(`touchstart`)判断要拖动的元素并定位该元素; 然后监听移动事件(`touchmove`)判断手指移动的方向距离并将这些参数转换为元素的移动方向距离,通过 `transform` (当然也可以通过定位`top&left`等)移动元素; 当然有开始就有停下来,所以还要监听结束(`touchend`)事件,在结束的时候进行相应的处理,返回初始位置,或者停在结束的位置。 阅读全文