vue 实现元素可拖曳

转载的，蛮好用的，多谢原博主Vue移动端实现元素拖拽 - Tove丶 - 博客园最近遇到一个需求，在App内嵌的H5页面上，有一个悬浮的客服图标，点击可跳转客服页面。最初这个客服图标采用的是固定定位的方式。现在新的需求是，可以拖拽该图标到屏幕任意位置，防止遮挡页面内容。思考实现https://www.cnblogs.com/chen214/p/15078391.html

原博主的方法，会导致拖曳后，页面重新返回顶部，在其基础上，修改了下，加下文

方法封装

/*** @name: draggable* @description: 元素拖拽*/
const draggableMixin = {data () {return {// 元素位置，用于样式绑定，动态更新位置(:style="{left: `${x}px`, top: `${y}px`}")elePos: {x: null,y: null},// 手指（鼠标）触摸点[即拖拽开始的位置]距离拖拽元素左上角的距离diffOfTarget: {x: 0,y: 0},this.offsetTop:0,}},methods: {dragStartHandler (e) {let touch = eif (e.touches) {touch = e.touches[0]}this.diffOfTarget.x = touch.clientX - e.target.offsetLeftthis.diffOfTarget.y = touch.clientY - e.target.offsetTop// 解决滑动穿透问题let scrollTop = document.scrollingElement.scrollTopthis.offsetTop=scrollTop console.log(scrollTop)// todo 在项目的全局样式下，需要定义一个modal-open的样式类/*** body.modal-open {*   position: fixed;*   width: 100%;*   min-height: 100%;* }*/document.body.classList.add('modal-open')document.body.style.top = -scrollTop + 'px'},draggingHandler (e) {let touch = eif (e.touches) {touch = e.touches[0]}// 设置拖拽元素的位置this.elePos.x = touch.clientX - this.diffOfTarget.xthis.elePos.y = touch.clientY - this.diffOfTarget.y// 限制元素不能超过屏幕if (this.elePos.x < 0) {this.elePos.x = 0} else if (this.elePos.x > window.screen.width) {this.elePos.x = window.screen.width - e.target.clientWidth}if (this.elePos.y < 0) {this.elePos.y = 0} else if (this.elePos.y > window.screen.height) {this.elePos.y = window.screen.height - e.target.clientHeight}},dragEndHandler (e) {document.body.classList.remove('modal-open')//原博主的这句话没加，导致最后拖曳了，会返回到顶部，加上去就没问题了document.documentElement.scrollTop=this.offsetTop}}
}export default draggableMixin

引用

<template><div><imgsrc="../assets/img/customer-service.png"alt=""class="customer-service":style="{'left': elePos.x + 'px', 'top': elePos.y + 'px' }"@mousedown="dragStartHandler"@touchstart.stop="dragStartHandler"@mousemove="draggingHandler"@touchmove.stop="draggingHandler"@mouseup="dragEndHandler"@touchend.stop="dragEndHandler"></div>
</template><script>import draggableMixin from '@/mixins/draggable'export default {mixins: [ draggableMixin ]}
</script><style scoped>
.customer-service {position: fixed;left: 10px;top: 200px;width: 36px;height: 36px;cursor: pointer;
}
</style>

vue 实现元素可拖曳相关推荐

vue控制元素的隐藏和显示
vue动态控制元素的隐藏和显示 <template><div @click="clickbj(i)"> //i 为父元素 for 循环的 index点击&l ...
vue给元素添加指令_Vue指令动态模糊元素
vue给元素添加指令 v模糊 (v-blur) Vue directive to blur an element dynamically. Useful to partially hide eleme ...
vue 获取元素宽高
vue 获取元素宽高 vue 中获取组件宽高分两种情况: 1.获取普通组件宽高,直接使用 $refs 即可 2.获取子组件宽高,需使用 $refs.$el 子组件 <template>&l ...
vue获取元素高度的方法
vue获取元素的高度 <divref="getHeight"class="block"/> .block {width: 100px;height: ...
Vue获取元素的方法，不需要通过document.getElementById()
vue获取元素的方式在html元素标签里面设置ref,然后在代码里面通过this.$refs.获取 <input title="手机号" ref="mobile& ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
效果图如下所示 .html 今日热门今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...
Vue 获取元素高度总是不准确的问题
今天老大没安排活干,也不想划水,于是打算用一个websocket写一个简易的聊天系统. 后端代码很容易就写好,但是前端是真的难搞,遇到一个很严重的问题: 当发送一条消息或者是收到一条消息,消息展示界面 ...
vue 数组元素替换_11. VUE 数组操作
变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 {{ item.message }} varexample1= newVue({ el ...

vue 实现元素可拖曳

vue 实现元素可拖曳相关推荐

最新文章

热门文章