vuejs移动端实现div拖拽移动

前端  /  管理员 发布于 4年前   541

vue移动端实现div拖拽移动，供大家参考，具体内容如下

本文讲述，在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。

相关知识点

• touchstart 当在屏幕上按下手指时触发
• touchmove 当在屏幕上移动手指时触发
• touchend 当在屏幕上抬起手指时触发
• mousedown mousemove mouseup对应的是PC端的事件
• touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

效果图

实现步骤

（一）html

总结了一下评论，好像发现大家都碰到了滑动的问题。就在这里提醒一下吧。可将该悬浮 DIV 同你的 scroller web 同级。 ---- (log: 2018-08-21)

html结构：

（二）JS

（三）CSS

实现好JS逻辑，基本上，问题不大。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• vuejs2.0运用原生js实现简单拖拽元素功能
• vuejs2.0运用原生js实现简单的拖拽元素功能示例
• vue2.0使用Sortable.js实现的拖拽功能示例