vue实现支持手机端悬浮可拖拽小球效果代码
代码语言:html
所属分类:拖放
代码描述:vue实现支持手机端悬浮可拖拽小球效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> .xuanfu { height: 4.5rem; width: 4.5rem; z-index: 990; 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; } </style> </head> <body> <div id="app"> <div id="customer"> <!-- Suspended HTML --> <div ref="moveDiv" class="xuanfu" id="div2" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end"> <div class="yuanqiu"> </div> </div> <div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js.........完整代码请登录后点击上方下载按钮下载查看
网友评论0