How to realize the div drag effect of Mobile end with vue

In this article, the editor introduces in detail "how to achieve the mobile div drag effect in vue". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve the mobile div drag effect in vue" can help you solve your doubts.

1. Share the code

Html code

A very simple structure, after all, is only a DEMO

SCSS code

.main {background-color: brown; height:-webkit-fill-available; .drag _ area {width: 10vW; height: 10vW; background-color: dodgerblue; position: absolute; top: 0; left: 0;}}

In order to take a screenshot to stand out, I specially added a background color to main.

Effect picture

The effect is that you can drag the blue color block freely within the scope of the screen, but beyond the screen area I have specially made a limit, and you can change it yourself if you don't need to limit it.

JS code

Export default {name: 'drag', data () {return {flags: false, position: {x: 0, y: 0, left: 0, top: 0}, top: 0, left: 0, width: window.innerWidth | | document.documentElement.clientWidth | | document.body.clientWidth, height: window.innerHeight | | document.documentElement.clientHeight | | document.body.clientHeight}} Methods: {down () {/ / drag the operation this.flags = true const refs = this.$refs.move_div.getBoundingClientRect () let touch = event if (event.touches) {touch = event.touches [0]} this.position.x = touch.clientX this.position.y = touch.clientY this.position.left = refs.left this.position.top = refs.top} Operation in move () {/ / drag if (this.flags) {let touch = event if (event.touches) {touch = event.touches [0]} const xPum = this.position.left + touch.clientX-this.position.x const yPum = this.position.top + touch.clientY-this.position.y this.left = xPum this .top = yPum this.banOut () / / prevent the page from sliding the default event document.addEventListener ('touchmove' Function () {event.preventDefault ()}, {passive: false}, end () {/ / drag the end operation this.flags = false this.banOut ()}, banOut () {/ / avoid dragging out-of-bounds restrictions const refs = this.$refs.move_div.getBoundingClientRect () if (this.left)

< 0) { this.left = 0 } else if (this.left >

This.width-refs.width) {this.left = this.width-refs.width} if (this.top

< 0) { this.top = 0 } else if (this.top >

This.height-refs.height) {this.top = this.height-refs.height} read this article, "how to achieve the div drag effect on mobile" article has been introduced, want to master the knowledge of this article, you still need to do your own practice to understand, if you want to know more related articles, welcome to follow the industry information channel.