vue拖拽

getDom() {

var div2 = document.getElementById("addBox");

// div2.addEventListener("mousedown", () => {

// this.down();

// }, false);

div2.addEventListener("touchstart", () => {

this.down();

}, false)

// div2.addEventListener("mousemove", () => {

// this.move();

// }, false);

div2.addEventListener("touchmove", () => {

this.move();

}, false)

// document.body.addEventListener("mouseup", () => {

// this.end();

// }, false);

div2.addEventListener("touchend", () => {

this.end();

}, false);

},

down() {

var div2 = document.getElementById("addBox");

this.moveFlag = true;

var touch;

if (event.touches) {

touch = event.touches[0];

} else {

touch = event;

}

this.cur.x = touch.clientX;

this.cur.y = touch.clientY;

this.dx = div2.offsetLeft;

this.dy = div2.offsetTop;

},

move() {

var div2 = document.getElementById("addBox");

// var duibiMain = document.getElementById("duibi-main");

if (this.moveFlag) {

var touch;

if (event.touches) {

touch = event.touches[0];

} else {

touch = event;

}

this.nx = touch.clientX - this.cur.x;

this.ny = touch.clientY - this.cur.y;

this.x = this.dx + this.nx;

this.y = this.dy + this.ny;

if (this.x < 0) {

this.x = 0;

} else if (this.x >= (document.body.clientWidth - 100)) {

this.x = document.body.clientWidth - 100;

} else {

this.x = this.dx + this.nx;

}

// console.log(this.y)

if (this.y <= 0) {

this.y = 0

} else if (this.y >= (document.body.clientHeight - 100)) {

this.y = (document.body.clientHeight - 100)

} else {

this.y = this.dy + this.ny;

}

div2.style.left = this.x + "px";

div2.style.top = this.y + "px";

//阻止页面的滑动默认事件

document.addEventListener("touchmove", () => {

event.preventDefault();

}, false);

}

},

end() {

this.moveFlag = false;

},

 

 

 

//比如你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

this.$nextTick(() => {

this.getDom();

})