vue拖动添加模块展示_vue移动端自定义拖拽组件（亲测有效）

一、前言

有段时间没有些博客了，最近一直忙于工作上的事情，今天正好有时间写一个笔记。移动端拖拽事件是开发中经常用到的情况，正好最近项目中有用到这一情况，在网上也搜索了一些博客，都不太理想，于是就综合我搜集的博客做一个总结，一边将来可以随时查看。

二、正文内容

话不多说直接上代码

(1)自定义一个公共组件drag.vue

@click="goNext"

@touchstart="down"

@touchmove="move"

@touchend="end"

>

询价车

export default {

name: "defaultDrag",

data() {

return {

flags: false,

position: { x: 0, y: 0 },

nx: "",

ny: "",

dx: "",

dy: "",

xPum: "",

yPum: ""

};

},

components: {},

computed: {},

mounted() {},

methods: {

goNext() {

this.$emit("goNext");

},

// 实现移动端拖拽

down() {

let default_drag_comp = document.querySelector("#default_drag_comp");

this.flags = true;

var touch;

if (event.touches) {

touch = event.touches[0];

} else {

touch = event;

}

this.maxW = document.body.clientWidth - default_drag_comp.offsetWidth;

this.maxH = document.body.clientHeight - default_drag_comp.offsetHeight;

this.position.x = touch.clientX - default_drag_comp.offsetLeft;

this.position.y = touch.clientY - default_drag_comp.offsetTop;

this.dx = touch.clientX;

this.dy = touch.clientY;

},

move(event) {

event.preventDefault();

let default_drag_comp = document.querySelector("#default_drag_comp");

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;

}

default_drag_comp.style.left = this.nx + "px";

default_drag_comp.style.top = this.ny + "px";

//阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove

document.addEventListener(

"touchmove",

function() {

// event.preventDefault();

},

false

);

}

},

//鼠标释放时候的函数

end() {

this.flags = false;

}

}

};

#default_drag_comp {

width: 1rem;

height: 1rem;

border-radius: 50%;

border: 2px solid #ffffff;

box-shadow: 0 0 0.4rem 2px #d3d3d3;

background: #ff9966;

position: fixed;

z-index: 1000;

bottom: 0.8rem;

right: 0.4rem;

display: flex;

justify-content: center;

align-items: center;

span {

color: #ffffff;

font-size: 0.24rem;

}

}

(2)在需要引用该组件的地方注册一下即可

(3)结果

TIM截图20190426120529.jpg

三、总结

好了，到这里了，希望对大家有帮助，谢谢！