1、拖动后记录x,y值
给div加上mousePosition事件
function mousePosition(evt){
evt = evt || window.event;
return {
x : evt.clientX + document.body.scrollLeft - document.body.clientLeft,
y : evt.clientY + document.body.scrollTop - document.body.clientTop
}
}
2、打开页面div定位
$(“div”).attr("top",y).attr("left",x);
扩展资料
在用js获取元素的位置之前，元素在页面的位置的计算公式，如下：
元素在页面的位置=此元素相对浏览器视窗的位置+浏览器滚动条的值；
用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置 ｛这个方法返回的是一个对象，即Object，该对象具有4个属性：top，left，right，bottom ｝。
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>
<body style="width:2000px; height:1000px;">
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px;
background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>
</body>
</html>
<script>
document.getElementById('demo').onclick=function (){
if (document.documentElement.getBoundingClientRect) {
alert("left:"+this.getBoundingClientRect().left)
alert("top:"+this.getBoundingClientRect().top)
alert("right:"+this.getBoundingClientRect().right)
alert("bottom:"+this.getBoundingClientRect().bottom)
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
alert("Demo的位置是X:"+X+";Y:"+Y)
}
}
</script>
getPoint(document.getElementById("div1"));//获取ID为div1元素的坐标
}
function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
var t = obj.offsetTop; //获取该元素对应父容器的上边距
var l = obj.offsetLeft; //对应父容器的上边距
//判断是否有父容器，如果存在则累加其边距
while (obj = obj.offsetParent) {//等效 obj = obj.offsetParent;while (obj != undefined)
t += obj.offsetTop; //叠加父容器的上边距
l += obj.offsetLeft; //叠加父容器的左边距
}
alert("top: " + t + " left: " + l);
}
为什么不写
随意事件触发
function getPoint() {
var t = document.getElementById("div").offsetTop;
var l = document.getElementById("div").obj.offsetLeft;
}
父容器的处理很nice
呵呵，感谢，请继续，修改代码 一次性解决下面一个问题 ，非常感谢。
鼠标在div上。 鼠标到 div左上角的距离
这个是封装，以便重复调用
function getPoint(obj, e) { //获取某元素以浏览器左上角为原点的坐标
var t = obj.offsetTop; //获取该元素对应父容器的上边距
var l = obj.offsetLeft; //对应父容器的上边距
//判断是否有父容器，如果存在则累加其边距
while (obj = obj.offsetParent) {//等效 obj = obj.offsetParent;while (obj != undefined)
t += obj.offsetTop; //叠加父容器的上边距
l += obj.offsetLeft; //叠加父容器的左边距
}
var newe = e || window.event;
document.getElementById("ddd").innerHTML = "top: " + t + " left: " + l + " x: " + (newe.clientX - l) + " y: " + (newe.clientY - t);
}
sadjkfhldskjfhasd
sadfasdfsadfasdfsadfasdfsadfasdf
|
广告 您可能关注的内容 |
