html5实现可拖拽移动的悬浮图标的示例代码HTML5中在title标题标签里设置小图标的方法HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

 // 代码直接在 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; } } }