JS Web API 拖拽对话框案例

2021-06-01 04:04

阅读:565

标签:fun   log   one   坐标   NPU   ade   BMI   alpha   relative   

    


思路:
1、当鼠标按下时,求出鼠标在盒子中的位置;
鼠标在盒子中的位置 = 鼠标在页面中的位置 - 盒子在页面中的位置

2、当鼠标移动时,保持鼠标在盒子中的位置不变(即盒子跟随鼠标移动)
盒子的坐标 = 鼠标当前在页面中的位置 - 鼠标在盒子中的位置

使用到的属性有:offsetLeft、offsetTop、pageX、pageY
注意:盒子要脱离文档流,即设置 position:absolute

====================问题解决l====================
问题:鼠标弹起了,盒子还黏在鼠标上。
解决:当鼠标弹起时,移除鼠标移动事件。
关闭按钮:当鼠标点击关闭按钮时,隐藏盒子
注意:使用getPage(e)解决pageX和pageY的浏览器兼容性问题

JS Web API 拖拽对话框案例

标签:fun   log   one   坐标   NPU   ade   BMI   alpha   relative   

原文地址:https://www.cnblogs.com/liout/p/10992440.html


评论


亲,登录后才可以留言!