Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to achieve draggable floating icons in html5". The content is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how html5 implements draggable floating icons".

The case code shows:

/ / the code is directly in the vue project and can be changed to js/jquery data () {return {gapWidth: 10, itemWidth: 20, / / the width of the icon itemHeight: 30 / / the height of the icon}}, created () {this.clientWidth = document.documentElement.clientWidth; this.clientHeight = this.clientWidth-this.itemWidth-this.gapWidth This.top = this.clientHeight*0.8;} methods: {dragStart (e) {this.$refs.div.style.transition = 'none';}, dragEnd (e) {this.$refs.div.style.transition =' all 0.3s' If (this.left > this.clientWidth/2) {this.left = this.clientWidth-this.itemWidth-this.gapWidth;} else {this.left = this.gapWidth }}, dragProgress (e) {if (e.targetTouches.length = 1) {let touch = event.targetTouches [0]; this.left = touch.clientX-this.itemWidth/2; this.top = touch.clientY-this.itemHeight/2 } above is all the content of the article "how to achieve draggable floating icons in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.