<div class="aui-content aui-margin-b-15" id="conDiv" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end"></div>
down() {
let moveDiv = document.getElementById('box')
this.flags = true;
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = moveDiv.offsetLeft;
this.dy = moveDiv.offsetTop;
},
move() {
let moveDiv = document.getElementById('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;
this.xPum = this.dx + this.nx;
this.yPum = this.dy + this.ny;
if (this.xPum > window.innerWidth - moveDiv.offsetWidth) {
moveDiv.style.left = (window.innerWidth - moveDiv.offsetWidth) + "px";
} else if (this.xPum < 0) {
moveDiv.style.left = 0 + "px";
} else {
moveDiv.style.left = this.xPum + "px";
}
if (this.yPum > window.innerHeight - moveDiv.offsetHeight) {
moveDiv.style.top = (window.innerHeight - moveDiv.offsetHeight) + "px";
} else if (this.yPum < 0) {
moveDiv.style.top = 0 + "px";
} else {
moveDiv.style.top = this.yPum + "px";
}
document.addEventListener("touchmove", function() {
event.stopPropagation();
}, false);
}
},
end() {
this.flags = false;
},