废话不多说，直接干货（小白一枚，大佬指教）
首先整理一下思路：
我要做的，是类似与滴滴打车首页下部的一个可以上下拖拽的功能，且拖拽之后会有遮罩层展示，其实刚开始想用滚动来实现此功能，觉得滚动可能会更加流畅些吧。首先给自己的可拖拽元素加定位，之后呢用touch事件来计算鼠标滑动的距离，然后将鼠标滑动的距离赋值成元素拖拽的距离就好了（关于移动我用的translate）；定位后将滑动距离赋值给top感觉不是很靠谱；
接下来说一下具体的实现过程：
元素加定位就不说了,首先给元素绑定touch，touch事件中包含事件对象，事件对象中的changedTouches【0】中有鼠标位置距离可视窗口顶部距离或者鼠标位置距离页面顶部位置（具体参数可见https://blog.csdn.net/weixin_41342585/article/details/80659736）
之后利用touchstart和touchend可以计算出鼠标滑动的距离，当然，这里的距离不是实时的，而是当鼠标放开时才会出现最终距离，如果想要实时距离，在使用touchstart获取鼠标刚开始位置时，接着用touchmove来获取鼠标结束时的位置，这里获取到的距离可以随你的鼠标位置随时变动。你应该使用这个实时获取的距离赋值给translate，上下左右当然都可以。然后，你再通过鼠标移动距离来判断元素最高可以升多高，最低的话可以放多低来限制元素的拖拽范围。
遮罩部分可以直接根据你的滑动高度除以一个你认为合适的数来改变遮罩的程度。
以上就是我实现拖拽功能的一些思路，有的同学可能要问这个拖动不是很流畅，这个如何解决呢。我的解决方案是根据touch事件的事件对象中的时间戳来判断用户滑动的时长，如果时间太长就不做任何改变，如果时间很短那么可以再给元素加个动画；
以上实现方案是在vue基础上实现的。大佬们如果有更好的建议，欢迎联系QQ1519372240或在下方留言。
代码贴到下方，望各位大佬指点！！！
