前言：

前言：最近一直忙于生活中的事情，今天有时间写个日记吧=吧，在开发移动端的时候经常用到拖拽模块，移动端拖拽事件也是开发中经常用到的情况，所以现在自己整一个，废话不多说

代码部分:

在components里面创建一个公共组件，dragMove.vue

写下如上代码：（你们直接复制就可以使用）

<!-- 拖拽滑动效果 -->
<template><div id="item_box" @click="goMove" @touchstart="down" @touchmove="move"         @touchend="end">//这里注意，我使用了阿里图标，你们使用的话，删除掉写自己的样式就好<i class="iconfont icon-a-bianlidian2x"></i></div>
</template><script>
export default {name: "defaultDrag",data() {return {flags: false,position: { x: 0, y: 0 },nx: "",ny: "",dx: "",dy: "",xPum: "",yPum: "",};},methods: {goNext() {this.$emit("goMove");},// 实现移动端拖拽down() {let item_box = document.querySelector("#item_box");this.flags = true;var touch;if (event.touches) {touch = event.touches[0];} else {touch = event;}this.maxW = document.body.clientWidth - item_box.offsetWidth;this.maxH = document.body.clientHeight - item_box.offsetHeight;this.position.x = touch.clientX - item_box.offsetLeft;this.position.y = touch.clientY - item_box.offsetTop;this.dx = touch.clientX;this.dy = touch.clientY;},move(event) {event.preventDefault();let item_box = document.querySelector("#item_box");if (this.flags) {var touch;if (event.touches) {touch = event.touches[0];} else {touch = event;}this.nx = touch.clientX - this.position.x;this.ny = touch.clientY - this.position.y;if (this.nx < 0) {this.nx = 0;} else if (this.nx > this.maxW) {this.nx = this.maxW;}if (this.ny < 0) {this.ny = 0;} else if (this.ny >= this.maxH) {this.ny = this.maxH;}item_box.style.left = this.nx + "px";item_box.style.top = this.ny + "px";document.addEventListener("touchmove",function() {// event.preventDefault()},false);}},//鼠标释放end() {this.flags = false;},},
};
</script><style  lang="scss" scoped>
#item_box {width: 1rem;height: 1rem;position: fixed;z-index: 1000;bottom: 60px;right: 0.4rem;border-radius: 50%;border: 2px solid #ffffff;box-shadow: 0 0 0.4rem 2px skyblue;background: #81f8e8;display: flex;justify-content: center;align-items: center;.iconfont {color: orange;}
}
</style>

然后在你们需要使用拖拽的组件中引入 dragMove.vue子组件 就好

（不要忘记在components中注册子组件哟）

//：goMove是子传夫的事件，不用执行任何步骤，写到methods中就好
<dragMove  @goMove="watchCar"></dragMove>

效果图如下：

都给俺点赞！！！

vue移动端实现拖拽相关推荐

vue 移动端可拖拽式icon图标
需求描述:在移动端页面悬浮一个可随便拖拽的图标,类似于苹果手机的辅助触控小圆点,并且可随意拖动. 预览: 组件代码如下: <template><div class="ys- ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果
原标题:Vue 仿探探拖拽卡片的效果已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版类似 Tinder 和探探的卡片效果的组件,社区中已经非常多了.我这一版除了可以实现和他 ...
vue+sortable实现表格拖拽
vue+sortable实现表格拖拽前言: 支持 vue3.0 支持表格拖拽支持自定义拖拽 sortable官网一.下载 sortable npm install sortablejs --sa ...
Vue+el-tree，元素拖拽时出现禁用图标，请看解决办法
项目需求:vue+el-tree实现节点拖拽到指定div播放视频: 问题:当节点拖拽时, 出现禁用图标: 一开始以为将禁用图标改变样式或隐藏就可以,一番尝试后, 发现这个图标可能是浏览器默认的, 经过 ...
基于 Spring Boot + Vue 实现的可视化拖拽编辑的大屏项目
大家好,今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目: 简介这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑 ...
html鼠标可拖动窗体,JS实现简单移动端鼠标拖拽
本文实例为大家分享了JS实现移动端鼠标拖拽的具体代码,供大家参考,具体内容如下 Document #div { width: 100%; height: 200px; background: rosy ...
npm 可视化html编辑器,超给力 Vue.js 可视化H5拖拽编辑器Quark-H5
前两天有分享一个鲁班H5移动端页面生成器.今天再给大家推荐一款超优秀的Vue H5可视化布局编辑器QuarkH5. quark-h5 基于 vue.js 开源的H5可视化拖放编辑器,star高达1.7 ...
【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有点像浏览器的一个bug）
<divclass='dragged':index="$index"draggable='true'@dragstart="dragstart"@drag ...

vue移动端实现拖拽

前言：

代码部分:

效果图如下：

vue移动端实现拖拽相关推荐

最新文章

热门文章