vue 移动端可拖拽式icon图标

需求描述：在移动端页面悬浮一个可随便拖拽的图标，类似于苹果手机的辅助触控小圆点，并且可随意拖动。

预览：

组件代码如下：

<template><div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}"ref="div"@click ="onBtnClicked"><slot name="icon"></slot><SvgIcon :iconClass="'changjianwentijieda'":style="{'width':itemWidth+'px','height':itemHeight+'px'}"/></div>
</template><script>export default {name: "DragIcon",props:{itemWidth:{type:Number,default:40},itemHeight:{type:Number,default:40},gapWidth:{type:Number,default:10},coefficientHeight:{type:Number,default:0.8}},created(){this.clientWidth = document.documentElement.clientWidth;this.clientHeight = document.documentElement.clientHeight;this.left = this.clientWidth - this.itemWidth - this.gapWidth;this.top = this.clientHeight*this.coefficientHeight;},mounted(){this.$nextTick(()=>{const div = this.$refs.div;div.addEventListener("touchstart",(e)=>{e.stopPropagation();div.style.transition = 'none';});div.addEventListener("touchmove",(e)=>{e.stopPropagation();if (e.targetTouches.length === 1) {let touch = event.targetTouches[0];this.left = touch.clientX - this.itemWidth/2;this.top = touch.clientY - this.itemHeight/2;}},false);div.addEventListener("touchend",(e)=>{e.stopPropagation();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;}if(this.top<=36){this.top=36+this.gapWidth}else{let bottom=this.clientHeight-50-this.itemHeight-this.gapWidthconsole.log(bottom,this.top)if(this.top>=bottom){this.top=bottom}}});});},methods:{onBtnClicked(){this.$emit("onFloatBtnClicked");},},data(){return{timer:null,currentTop:0,clientWidth:0,clientHeight:0,left:0,top:0,}}}
</script><style lang="scss" scoped>.ys-float-btn{background:rgba(56,181,77,1);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1);border-radius:50%;color: #666666;z-index: 20;transition: all 0.3s;display: flex;flex-direction: column;justify-content: center;align-items: center;position: fixed;bottom: 20vw;img{width: 50%;height: 50%;object-fit: contain;margin-bottom: 3px;}}.su_img{width: 40px;height: 40px;margin: 8px 0 0 0;}</style>

vue 移动端可拖拽式icon图标相关推荐

vue移动端实现拖拽
前言: 前言:最近一直忙于生活中的事情,今天有时间写个日记吧=吧,在开发移动端的时候经常用到拖拽模块 ,移动端拖拽事件也是开发中经常用到的情况,所以现在自己整一个,废话不多说代码部分: 在compo ...
拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG.它也是一种LowCode解决方案.通过它可以快速完成Vue组件的代码骨架搭建 ...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
使用WebGL去实现一个拖拽式UI代码生成App
前言 UI(User Interface),即用户界面,是软件和用户之间进行交互和信息交换的媒介,实现信息的内部形式与人类可接受形式间的转换.UI开发一般需要经过UI设计.UI实现两个过程.UI设 ...
拖拽式可视化设计，打造高效流程管理体系
编者按:企业管理离不开流程管理,怎样的流程管理系统才是我们需要的?本文针对企业流程管理中的常见问题,介绍了有助于企业高效管理的流程管理系统--天翎BPM. 概要: (1)流程管理常见问题 (2)我们需 ...
Jupyter Notebook 交互式编程低代码拖拽式编程 | 数据科学生态下的理想平台
近几年,Jupyter Notebook 为数据科学家们提供了与数据有效交互的工具.用户可以运行代码.查看结果,然后重复数据之间的循环和迭代.使用 Jupyter Notebook 进行研究成为了数据 ...
拖拽式快速建站存在哪些缺陷?
拖拽式快速建站存在哪些缺陷? 拖拽式快速建站因方便快捷.成本低廉被很多建站平台使用,但专业人士却几乎不使用拖拽建站,下面小编来简单介绍一下拖拽式建站存在哪些缺陷? 拖拽式建站只适合简单的网站,相比于专 ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...

vue 移动端可拖拽式icon图标

vue 移动端可拖拽式icon图标相关推荐

最新文章

热门文章