vue拖拽组件超好用！！！

vue拖拽组件

在vue实现拖拽，经常使用到，所以自己封装了成了一个组件
效果展示

组件代码

<template><div class="dragBtn" @touchstart="move" @click="clickMove" ref="oDiv" :style="{'width': width + 'px', 'height': height + 'px'}"><slot></slot></div>
</template><script>
export default {// distance 数组 ['上', '右', '下'， '左']props: {distance: {require: false,type: Array},width: {require: false,type: Number,default: 50},height: {require: false,type: Number,default: 50}},data () {return {defalutDistance: []}},created () {if (!this.distance) {this.defalutDistance = [0, window.screen.availWidth - this.width, window.screen.availHeight - this.height,0 ]console.log(this.defalutDistance)}},methods: {move (e) {e.stopPropagation()const oDiv = this.$refs['oDiv']const disX = e.touches[0].clientX - oDiv.offsetLeftconst disY = e.touches[0].clientY - oDiv.offsetTopdocument.addEventListener('touchmove', myFunction, { passive: false })let distance = this.defalutDistanceif (this.distance) {distance = this.distance}function myFunction(e) {e.preventDefault()let left = e.touches[0].clientX - disXlet top = e.touches[0].clientY - disYif (left <= distance[3]) {left = distance[3]}if (left >= distance[1]) {left = distance[1]}if (top <= distance[0]) {top = distance[0]}if (top >= distance[2]) {top = distance[2]}oDiv.style.left = left + 'px'oDiv.style.top = top + 'px'}document.addEventListener('touchend', () => {document.removeEventListener('touchmove', myFunction, { passive: false })document.removeEventListener('touchend', myFunction, { passive: false })})},clickMove (e) {e.stopPropagation()this.$emit('clickMove', e)}}
}
</script><style scoped>
.dragBtn {/* width: 50px;height: 50px; *//* border-radius: 50%; *//* background-color: violet; */position: fixed;z-index: 1000;bottom: 40px;right: 40px;/* background-image: url('../assets/image/change.png'); *//* background-size: cover; *//* border: 1px solid red; */z-index: 99;
}
</style>

使用组件

<z-drag @clickMove="showPopup = true" :width="50" :height="50"><van-icon name="add-o" class="addIcon" />
</z-drag>

欢迎使用！！

vue拖拽组件超好用！！！相关推荐

Vue拖拽组件开发实例
为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: 使用虚拟DOM: ...
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
自己封装的vue拖拽组件
自己封装的vue拖拽组件使用Vue.Draggable实现 Vue.Draggable的基础使用方法可以看看这个哥们的https://blog.csdn.net/zjiang1994/article ...
vue拖拽组件（app移动端）
vue拖拽组件 <template><div id="webId">< ...
VUE 拖拽组件 vue.draggable
中文文档 https://www.itxst.com/vue-draggable/tutorial.html 安装 npm i -S vuedraggable 属性属性名称说明 group :gr ...
vue拖拽组件，从此解放你的双手
一??vue拖拽.拖拽它来啦!它来啦! -机智如我一??? 特别简单 ,安装.注册.引用即可完成拖拽需求控制台一??打印拖拽信息一??? 一??1.npm安装 npm install awe- ...
简单使用vue拖拽组件vue3-dnd
项目中需要使用到拖拽,这里使用vue3-dnd来满足需求这里项目使用的vue3(使用js而非ts) 插件官网地址:Vue3 DnD 安装 npm install vue3-dnd react-dnd ...
vue拖拽组件生成页面代码,vue可视化拖拽组件模板
怎么使用vuedraggable实现简单的拖拽,只拖拽一个内容(div) . 仔细观察发现,今日头条导航部分编辑效果,有以下几个效果1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)2:拖拽前选中效 ...
Vue 拖拽组件（实现上下拖拽） vuedraggable
fm: 首先 npm i -S vuedraggable 这样可以实现一列按钮之间可以进行上下拖拽重新排版 <template><vuedraggable v-model=&qu ...

vue拖拽组件超好用！！！

vue拖拽组件

vue拖拽组件超好用！！！相关推荐

最新文章

热门文章