vue移动端写的拖拽功能示例代码

相关知识点

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

效果图

实现步骤html

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

js

css

 
 #webId { position: relative; }
 .xuanfu {
  height: 54px; 
  width: 54px;
  
  z-index: 999;
  position: fixed;
  top: 4.2rem;
  right: 3.2rem;
  border-radius: 0.8rem;
  background-color: rgba(0, 0, 0, 0.55);
 }
 .yuanqiu {
  height: 2.7rem;
  width: 2.7rem;
  border: 0.3rem solid rgba(140, 136, 136, 0.5);
  margin: 0.65rem auto;
  color: #000000;
  font-size: 1.6rem;
  line-height: 2.7rem;
  text-align: center;
  border-radius: 100%;
  background-color: #ffffff;
 }

总结

到此这篇关于vue移动端写的拖拽功能示例代码的文章就介绍到这了,更多相关vue移动端拖拽内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！