html移动小图标,html5 实现可拖拽移动的悬浮图标

h5 上经常会有这样的需求：

需要在页面上加上一个悬浮图标，大致是如下图的最终实现

但是往往按照设计稿是不会遮住主体区域的，但是实际上有时候偏偏会遮挡主体区域，但是为了更好的点击量，又不得不悬浮在页面上...

如果能让图标可拖拽移动，这样在遮住主体区域之后，用户可自由移动，这种方案及可以兼顾了。

实现的效果如下：

(和微信的浮窗效果类似，左右位置靠边显示，上下位置随意放)

话不多说，上代码了

:style="{'width': itemWidth+'px','height': itemHeight+'px','left': left+'px','top': top+'px'}"

ref="div"

@touchstart.prevent="(e) => {dragStart(e)}"

@touchend.prevent="(e) => {dragEnd(e)}"

@touchmove.prevent="(e) => {dragProgress(e)}"

复制代码

// 代码直接在 vue 项目里，可自行改为js/jquery 写法

data () {

return {

gapWidth: 10,

itemWidth: 20, // 图标的宽度

itemHeight: 30 // 图标的高度

}

created() {

this.clientWidth = document.documentElement.clientWidth;

this.clientHeight = document.documentElement.clientHeight;

this.left = this.clientWidth - this.itemWidth - this.gapWidth;

this.top = this.clientHeight*0.8; }

methods: {

dragStart(e) {

this.$refs.div.style.transition = 'none';

dragEnd(e) {

this.$refs.div.style.transition = 'all 0.3s';

if (this.left > this.clientWidth/2) {

this.left = this.clientWidth - this.itemWidth - this.gapWidth;

} else {

this.left = this.gapWidth;

}

dragProgress(e) {

if (e.targetTouches.length === 1) {

let touch = event.targetTouches[0];

this.left = touch.clientX - this.itemWidth/2;

this.top = touch.clientY - this.itemHeight/2;

}

}复制代码

以上代码既可以上下也可以左右移动，如果只想让可上下移动，就去掉 left 相关的设置和计算。

html移动小图标,html5 实现可拖拽移动的悬浮图标相关推荐

html5 实现可拖拽移动的悬浮图标
h5 上经常会有这样的需求: 需要在页面上加上一个悬浮图标,大致是如下图的最终实现但是往往按照设计稿是不会遮住主体区域的,但是实际上有时候偏偏会遮挡主体区域,但是为了更好的点击量,又不得不悬浮在页面 ...
html5拖动鼠标直线,html5的鼠标拖拽
鼠标拖拽 Title .one {width:200px;height:200px;border:1px solid blue;margin:10px;} .two {width:50px;heigh ...
html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
android可拖拽九宫格,微信小程序实现九宫格图片拖拽
(在真机上的效果就不演示了,是差不多的) 实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签. moveable-area是可拖拽的区域,需要设置 ...
js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址下载地址
HTML5 drag drop 拖拽与拖放简介
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1419 一.前面的话 ...
span标签的鼠标滑入提示_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽...
一.基于鼠标事件的拖拽原理--onmousedown.onmousemove.onmouseup onmousedown 该事件会在鼠标按键被按下时触发支持该事件的HTML标签: html < ...
小程序Android端movable-view拖拽卡顿掉帧的优化
背景: 最近项目中使用到movable-view来做一个拖拽排序的功能,等到功能都实现完成后到真机测试发现,拖拽动画在Android端存在严重的卡顿掉帧,及其不跟手,但是在IOS端却挺流畅.查阅Goo ...
Vue+el-tree，元素拖拽时出现禁用图标，请看解决办法
项目需求:vue+el-tree实现节点拖拽到指定div播放视频: 问题:当节点拖拽时, 出现禁用图标: 一开始以为将禁用图标改变样式或隐藏就可以,一番尝试后, 发现这个图标可能是浏览器默认的, 经过 ...

html移动小图标,html5 实现可拖拽移动的悬浮图标

html移动小图标,html5 实现可拖拽移动的悬浮图标相关推荐

最新文章

热门文章