Vue 可拖拽的组件

touchstart：主要做一些例如禁止滚动，防止滚动冲突
touchmove: 当手指滚动时，使目标元素（也就是组件）跟随手指的滚动进行移动
touchend：用于手指移开，判断组件是回到左边还是右边。

   <div class="feedback" ref="drawable" :style="{left: left, top: top}"@touchstart="touchstart"@touchend="touchend"@touchmove="mousemove">// 图片自行更换 <img src="../../assets/images/personal/feedback.png" alt="" @click="toFeedBack"></div>

data(){return{flag: false,top: '80%',left: '80%'}
},
methods:{toFeedBack() {this.$router.push({path: '/view/feedback-index'})},touchstart() {this.flag = true// 禁用页面滚动条document.getElementsByClassName('wrapper').style = 'overflow: hidden;'this.$refs.drawable.style.transition = 'none'},touchend() {this.flag = falsethis.$refs.drawable.style.transition = 'all 0.2s'document.getElementsByClassName('wrapper').style = 'overflow: auto;'let left = this.$refs.drawable.offsetLeftlet screenWidth = window.screen.widthlet oWidth = this.$refs.drawable.offsetWidth// 判断是回到左边还是右边if (left + oWidth / 2 <= screenWidth / 2) {this.$refs.drawable.style.left = '0px'} else {this.$refs.drawable.style.left = screenWidth - oWidth + 'px'}},mousemove(e) {// 禁止默认行为，防止在微信上打开和下拉冲突e.preventDefault()if (this.flag) {let clientY = e.targetTouches[0].clientYlet clientX = e.targetTouches[0].clientXlet offsetHeight = this.$refs.drawable.offsetHeightlet offsetWidth = this.$refs.drawable.offsetWidthlet top = clientY - offsetHeight / 2let left = clientX - offsetWidth / 2// 屏幕得宽度let screenWidth = window.screen.widthlet screenHeight = window.screen.heightlet maxTop = screenHeight - offsetHeightlet maxLeft = 0const halfWidth = screenWidth / 2if (this.isOnlyLeft) {maxLeft = halfWidth - offsetWidth / 2} else {maxLeft = screenWidth - offsetWidth}if (top <= 0) {top = 0}if (top > maxTop) {top = maxTop}if (this.isOnlyRight) {if (left <= halfWidth) {left = halfWidth}} else {if (left <= 0) {left = 0}}left = left > maxLeft ? maxLeft : leftthis.$refs.drawable.style.top = top + 'px'this.$refs.drawable.style.left = left + 'px'}}
}

  .feedback {position: fixed;z-index: 100;img {width: 68px;height: 76px;}}

ok，搞定，记录一下

Vue 可拖拽的组件相关推荐

vue.draggable 拖拽 ant 组件布局
vue.draggable 拖拽项目需求中,需要支持拖拽,即找到了vue.draggable,下面来说一下基本使用方法 1.首先需要安装它,官网地址 https://www.itxst.com/vu ...
vue实现拖拽的组件
<1> 安装通过NPM安装 $ npm install awe-dnd --save 插件应用在main.js中,通过Vue.use导入插件 import VueDND from 'a ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
Vue 实现拖拽模块(一)拖拽添加组件
本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue拖拽添加组件的简单实现,具体如下: 效果图实现思路使用 H5 的新特性 ...
Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了自定义拖拽组件位置的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...
java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
vue拖拽排序组件
vue拖拽排序组件 npm install vuedraggable -S vue.draggable中文文档组件代码 <template><div><div cla ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
拖拽功能 php,基于Vue实现拖拽功能
这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: ...

Vue 可拖拽的组件

Vue 可拖拽的组件相关推荐

最新文章

热门文章