html5如何实现可拖拽移动的悬浮图标

这篇文章主要为大家展示了"html5如何实现可拖拽移动的悬浮图标"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"html5如何实现可拖拽移动的悬浮图标"这篇文章吧。

案例代码展示：

// 代码直接在 vue 项目里，可自行改为js/jquery 写法data () {    return {        gapWidth: 10,        itemWidth: 20, // 图标的宽度        itemHeight: 30 // 图标的高度    }},created() {          this.clientWidth = document.documentElement.clientWidth;         this.clientHeight = document.documentElement.clientHeight;          this.left = 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;                }          }}

以上是"html5如何实现可拖拽移动的悬浮图标"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！