适配双端浮标拖拽

最近写到一个需求是悬浮球拖动，看了很多网上的案例，要么移动端很流畅那么PC端就很卡，要么双端（ps:双端是指移动端和PC端）都很卡。于是自己就在网上百度改造了一款双端基本上很流畅的就能拖拽

首先先写一个div壳子（拖拽就是改变这个div的位置）

<div class="box-new" v-show="boxnew" v-drag @click="onBtnClicked" ref="floatButton":style="{'width': itemWidth + 'px', 'height': itemHeight + 'px', 'left': left + 'px', 'top':       top + 'px'}"><img src="img/xuanfuqiu.png"  draggable="false" />
</div>

这里面的 v-drag 主要是用于移动端

之后就要去注册一下事件（因为我是在html中引入的vue.js所以我的data中没有写return 如果大家是在vue项目的话记得请在return中写哦~~）

data: {boxnew: true,bindicon: true,//浮标拖动clientWidth: 0,clientHeight: 0,timer: null,currentTop: 0,left: 90,top: 0,activeArr: "GiftBags",
},
directives: {drag: { // 在要拖拽的元素上加 v-drag// 指令的定义bind: function (el) {let odiv = el //获取当前元素odiv.onmousedown = function (e) {//算出鼠标相对元素的位置let startX = e.clientX;let startY = e.clientY;let starL = odiv.offsetLeftlet starT = odiv.offsetToplet maxLeft = document.documentElement.offsetWidth - odiv.offsetWidth;starL = starL > maxLeft ? maxLeft : starL;document.onmousemove = function (e) {odiv.style.transition = 'none';// 元素的位置let left = e.clientX - startX + starL;let top = e.clientY - startY + starT;// 边界判断let maxLeft = document.documentElement.offsetWidth;let minLeft = 0;left = left > maxLeft ? maxLeft : left;left = left < minLeft ? minLeft : left;//绑定元素位置到positionX和positionY上面this.positionX = topthis.positionY = left//移动当前元素odiv.style.left = left + 'px'odiv.style.top = top + 'px'}document.onmouseup = () => {let boxLeft = parseInt(odiv.style.left),pageX = document.documentElement.offsetWidth - odiv.offsetWidth;document.onmousemove = nulldocument.onmouseup = null// 悬浮左右滑动的逻辑if (boxLeft < pageX / 2) {odiv.style.left = 0 + 'px';odiv.style.transition = 'left .3s';} else {odiv.style.left = pageX + 'px';odiv.style.transition = 'left .3s';}}}},},
},
props: {itemWidth: {// 悬浮按钮宽度type: Number,default: 50},itemHeight: {// 悬浮按钮高度type: Number,default: 50},gapWidth: {// 距离左右两边距离type: Number,default: -25},coefficientHeight: {// 从上到下距离比例type: Number,default: 0.1}
},

后面我们就需要去做一些拖拽的操作啦，这些操作可都得写在methods下面哦

  onBtnClicked() {this.$emit("onFloatBtnClicked");},handleScrollStart() {this.timer && clearTimeout(this.timer);this.timer = setTimeout(() => {this.handleScrollEnd();}, 300);this.currentTop =document.documentElement.scrollTop || document.body.scrollTop;if (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth / 2;} else {this.left = -this.itemWidth / 2;}},handleScrollEnd() {let scrollTop =document.documentElement.scrollTop || document.body.scrollTop;if (scrollTop === this.currentTop) {if (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth - this.gapWidth;} else {this.left = this.gapWidth;}}},

最后我在mounted里面做了一个判断是pc然后再确定悬浮球的边距

 mounted() {// 判断Pc端if (document.documentElement.clientWidth > 750) {this.$refs.floatButton.vue = this; // 将实例传递给当前元素}//移动端拖拽this.clientWidth = document.documentElement.clientWidth;this.clientHeight = document.documentElement.clientHeight;this.left = this.clientWidth - this.itemWidth - this.gapWidth;this.top = this.clientHeight * this.coefficientHeight;this.$nextTick(() => {const floatButton = this.$refs.floatButton;floatButton.addEventListener("touchstart", () => {floatButton.style.transition = "none";});// 在拖拽的过程中，组件应该跟随手指的移动而移动。floatButton.addEventListener("touchmove", e => {console.log("移动中", e);if (e.targetTouches.length === 1) {// 一根手指let touch = e.targetTouches[0];this.left = touch.clientX - 40;this.top = touch.clientY - 25;}});// 拖拽结束以后，重新调整组件的位置并重新设置过度动画。floatButton.addEventListener("touchend", () => {floatButton.style.transition = "all 0.3s";if (this.left > document.documentElement.clientWidth / 2) {this.left = document.documentElement.clientWidth - 20;} else {this.left = -20;}});});},

到这，，，，悬浮球拖拽的操作就完成了，如果大家有需要的话完全拿代码去试一试哦，最后谢谢大家的采纳，如果有什么更好的方法欢迎联系，谢谢大家~~

vue适配双端浮标(悬浮球)拖拽相关推荐

sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
vue 侧边悬浮_Vue实现PC端靠边悬浮球的代码
我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种. 实现是这个样子: 手边没有球形图.随便找一个,功能这里演示的为单机悬浮球注销登录嗯,具体代码: :class="['meun-sw ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
vue h5 实现原生js悬浮球
详细看代码 <div id="float-ball"><!-- <i class="icon-float-ball"></i ...
sortable vue 排序_VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序...
sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中的table进行拖拽行排序这里用到了sorttable sortable ...
Vue结合HTML5拖放API 实现目录拖拽～
拖放事件 dom被拖拽--->经过一些dom--->到达指定dom 被拖拽的dom:(源对象) dragstart 源对象被拖拽 drag 源对象拖拽过程中 dragend 源对象拖拽结束 ...
全网为数不多清晰可行的在VUE中使用sortable.js实现动态拖拽排序的教程！
目录 0 写在前面的 1 依赖安装 2 手写简单标签演示 3 要点 4 效果 0 写在前面的首先批评以下文章 (10条消息) sortable.js 实现拖拽_sortablejs_花铛的博客-CS ...
html可移动的悬浮按钮,js仿苹果悬浮可拖拽按钮，并且点击展开效果
今天写了一个仿苹果的悬浮按钮,由于只在右侧展开,所以只能上下拖拽,展开效果入下 1.html 2.css @charset "gb2312"; .info-nr {position ...
sortable vue 排序_vue 使用 sortable 实现 el-table 拖拽排序功能
本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import ...

vue适配双端浮标(悬浮球)拖拽

适配双端浮标拖拽

首先先写一个div壳子（拖拽就是改变这个div的位置）

vue适配双端浮标(悬浮球)拖拽相关推荐

最新文章

热门文章