使用鼠标当前坐标位置设置div盒子的位置

最新推荐文章于 2023-09-20 13:51:42 发布

油纸

最新推荐文章于 2023-09-20 13:51:42 发布

阅读量757

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_40425415/article/details/120001790

版权

HTML JavaScript 动态定位 CSS 事件处理

关键词由CSDN通过智能技术生成

html 模板

<!-- 外面容器盒子 -->
<div style="position: relative;" id="box">
    <div id="moveDiv">需要定位的盒子</div>
</div>

js触发事件

setIt() {
    var event = window.event||arguments[0];
	// 获取鼠标相对文本窗口的坐标 - 容器相对偏移量 = 当前需要定位的坐标
	var y = event.pageY - $("#box").offset().top + "px"
    var x = event.pageX - $("#box").offset().left + "px"
    $("#moveDiv").css({"top": y , "left": x});
}