vue 可拖拽组件的实现

废话不多说，直接上代码

<template><divclass="discussIcon"ref="discussIcon"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd"></div>
</template>
<script>
var dx, dy
var screenWidth = window.screen.width
var screenHeight = window.screen.height
export default {name: 'dragDrop',data () {return {flags: false,touchStartFlag: false,position: {lastx: 0,lasty: 0,x: 0,y: 0},};},methods: {touchStart (event) {this.flags = truethis.touchStartFlag = truevar touchif (event.touches) {touch = event.touches[0]} else {touch = event}// console.log('鼠标点所在位置', touch.clientX,touch.clientY)// console.log('div左上角位置', event.target.offsetTop,event.target.offsetLeft)dx = touch.clientX - event.target.offsetLeftdy = touch.clientY - event.target.offsetTop},touchMove () {if (this.flags) {var touchif (event.touches) {touch = event.touches[0]} else {touch = event}// 定位滑块的位置this.position.x = touch.clientX - dxthis.position.y = touch.clientY - dy// 为了区分click事件if (this.touchStartFlag) {this.position.lastx = this.position.xthis.position.lasty = this.position.ythis.touchStartFlag = false}// console.log('position', this.position.x, this.position.y )// console.log('positionlast', this.position.lastx, this.position.lasty )// 临界处理，防止拖出页面if (this.position.x < 0) {this.position.x = 0} else if (this.position.x > screenWidth - touch.target.clientWidth) {this.position.x = screenWidth - touch.target.clientWidth}if (this.position.y < 0) {this.position.y = 0} else if (this.position.y > screenHeight - touch.target.clientHeight) {this.position.y = screenHeight - touch.target.clientHeight}this.$refs.discussIcon.style.left = this.position.x + 'px'this.$refs.discussIcon.style.top = this.position.y + 'px'//阻止页面的滑动默认事件document.addEventListener("touchmove", function () {event.stopPropagation()}, false)}},//鼠标释放时候的函数touchEnd () {this.flags = false// 移动距离过短 视为点击事件if (Math.abs(this.position.x - this.position.lastx) < 3 && Math.abs(this.position.y - this.position.lasty) < 3) {this.$emit('dragClick')}this.position.lastx = this.position.xthis.position.lasty = this.position.y},}
}
</script>
<style lang="stylus" scoped>
.discussIcon {height: 100pxwidth: 100pxbackground-image: url('图片地址')background-size: 100% 100%border-radius: 50%position: absolutebottom: 170pxright: 28pxz-index: 999999
}
</style>

vue 可拖拽组件的实现相关推荐

html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用树形结构非常简单,t ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
vue拖拽组件生成页面代码,vue可视化拖拽组件模板
怎么使用vuedraggable实现简单的拖拽,只拖拽一个内容(div) . 仔细观察发现,今日头条导航部分编辑效果,有以下几个效果1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)2:拖拽前选中效 ...
vue可视化拖拽组件模板,vue组件拖拽自定义界面
前端可视化开发平台哪个好用? ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备. ThingJS 为可视化应用提供了简单.丰富的功能 ...
vue列表拖拽组件 vue-dragging
安装 $ npm install awe-dnd --save 应用在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd'Vue.use(VueDN ...
手机端适用：vue列表拖拽组件 vue-dragging
//安装 $ npm install awe-dnd --save //应用 //在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd'Vue.use ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了自定义拖拽组件位置的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...

vue 可拖拽组件的实现

vue 可拖拽组件的实现相关推荐

最新文章

热门文章