html可拖动div,html可以拖动的窗口

　　H5经常有这样的需求：

　　你需要在页面上添加一个浮动图标，大概就是下图的最终实现。

　　但是按照设计稿不会覆盖主区域，但实际上有时候会覆盖主区域，只是为了更好的点击量不得不悬浮在页面上。

　　如果图标可以拖拽移动，让用户在覆盖主要区域后可以自由移动，这个方案可以兼顾两者。

　　取得的效果如下：

　　(类似微信的浮窗效果，左右位置并排显示，上下位置随机放置)

　　话不多说，已编码。

　　 div class= ys-float-BTN :style= { width :item width px ， height: itemHeight px ， left: left px ， top px } ref= div @ touch start . prevent=(e)={ dragStart(e)} @ touch end . prevent=(e)={ drag progress(e)} img src=。/./assets/fc-icon . png /div//代码直接在vue项目中，可以写成js/jquery data(){ return { gap width:10，item width: 20，icon itemHeight的宽度：30//icon的高度}}，created(){ this . client width=document . document element . client width；this . client height=document . document element . client height；this . left=this . client width-this . item width-this . gap width；this . top=this . client height * 0.8；}方法：{ dragStart(e) { this。$ refs . div . style . transition= none ；}，dragEnd(e) { this。$refs.div.style.transition=全是0.3s ；if(this . left this.clientWidth/2){ this . left=this . client width-this . item width-this . gap width；} else { this . left=this . gap width；} }，drag progress(e){ if(e . target touches . length===1){ let touch=event . target touches[0]；this . left=touch . clientx-this.itemWidth/2; this . top=touch . clienty-this.itemHeight/2; } } }以上代码可以上下或左右移动。如果您只想上下移动，请删除与左相关的设置和计算。

　　这就是这篇关于html5的可拖动浮动图标的示例代码的文章。有关html5的可拖动浮动图标的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。