To realize the dragging function of the div on the mobile terminal, you need to know some native events and methods of the following mobile terminal; the operation is essentially the same as that on the PC terminal;
Realize the drag function of the div on the PC side: link
event
| method | describe |
|---|---|
| touchstart | Fires when an element is touched |
| touchmove | Triggered when the element slides |
| touchend | Fired when the touch element is lifted |
method
| method | describe |
|---|---|
| event.targetTouches[0].pageX | The X-axis coordinate of the current finger, relative to the browser page or window |
| event.targetTouches[0].pageY | The Y-axis coordinate of the current finger, relative to the browser page or window |
| event.offsetLeft | Read-only property, returns the pixel value from the left border of the current element to the left of the positioned element (or the nearest element) |
| event.offsetTop | Read-only property, returns the pixel value at the top of the current element's top border positioned element (or the nearest element) |
| event.offsetHeight | Read-only property, it returns the pixel height of the element, the height includes padding and border, does not include margin, is an integer, and the unit is px |
| event.offsetWidth | Same as above, returns the pixel width of the element |
Note: Finger movement will also trigger the scrolling of the screen (if the width overflows and a scroll bar appears), so prevent the default screen scrolling event. preventDefault ();
Drag principle :
It is mainly to change the positioning value of the positioning element to realize the movement of the position; positioning value = the position in the finger sliding - the initial position and distance limit when the finger just touched;
Implementation code:
<template>
<!-- 移动端拖拽实现 -->
<div class="dropContainer">
<div id="Drop" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)" class="drop"></div>
</div>
</template>
<script>
export default {
name: "dropContainer",
data() {
return {
DropEl: null,
dropContainer: null,
// 元素未拖动时的初始位置 绑定的是行内样式
style: {
top: "100px",
left: "100px"
},
// 位置差
disX: 0,
disY: 0
};
},
computed: {
},
mounted() {
// 获取元素
this.DropEl = document.getElementById("Drop");
this.dropContainer = document.getElementsByClassName("dropContainer")[0];
},
methods: {
// 手指落下时触发
touchstart(event) {
// 1，计算位置差 因为clientX和offsetLeft的属性返回的位置不一样 要相减得到拖动元素内实际点击的位置
// pageX 永远大于等于 offsetLeft pageY也是同理
this.disX = event.targetTouches[0].pageX - this.DropEl.offsetLeft;
this.disY = event.targetTouches[0].pageY - this.DropEl.offsetTop;
},
// 手指移动时触发
touchmove(event) {
// 2，获取手指移动的实时位置 需要减去位置差
let moveX = event.targetTouches[0].pageX - this.disX;
let moveY = event.targetTouches[0].pageY - this.disY;
// 3，获取容器的宽高和拖动元素的宽高 每一次移动都会获取一次 ，建议放在外面进行获取
let dragHeight = this.DropEl.offsetHeight;
let dragWidth = this.DropEl.offsetWidth;
let dragContainerWidth = this.dropContainer.offsetWidth; //获取容器的高度和宽度
let dragContainerHeight = this.dropContainer.offsetHeight;
// 4，控制范围：在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
if (moveX <= 0) {
moveX = 0;
}
// 上边界
if (moveY <= 0) {
moveY = 0;
}
//下边界 容器高度 - 拖动元素高度
if (moveY >= dragContainerHeight - dragHeight) {
moveY = dragContainerHeight - dragHeight;
}
//右边界 容器宽度 - 拖动元素宽度
if (moveX >= dragContainerWidth - dragWidth) {
moveX = dragContainerWidth - dragWidth;
}
// 5，开始移动
this.style.left = moveX + "px";
this.style.top = moveY + "px";
}
}
};
</script>
<style lang="scss" scoped>
.dropContainer {
width: 100%;
height: 100vh;
}
.drop {
position: fixed;
width: 30px;
height: 30px;
border: 5px solid red;
border-radius: 50%;
background-color: red;
text-align: center;
}
</style>