导航:首页 > 编程语言 > js算拖动的坐标

js算拖动的坐标

 发布时间：2025-09-04 22:38:17

Ⅰ js拖动div，怎样获取当前div坐标显示在文本框

<!DOCTYPEHTML>
<html>
<head>
<metacharset=gb2312>
<title>学了又学</title>
<styletype="text/css">
.main{
	width:1000px;
	height:600px;
	margin:0auto;
	border:1pxsolid#000;
}

.maindiv{
	position:absolute;
	background:#fa0;
	width:220px;
	padding:10px;
	height:150px;
	border:1pxsolid#999;
	cursor:move;
}

input{
	width:100%;
}

.maindivspan{
	display:block;
	font-size:28px;
	color:#fff;
	font-weight:bold;
	font-family:Arial
}
</style>
<scripttype="text/javascript">
vara;
document.onselectstart=document.ondragstart=document.oncontextmenu=function()
{
returnfalse;
};
document.onmouseup=function()
{
if(!a)
return;
document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
a="";
};
document.onmousemove=function(d)
{
if(!a)
return;
d=d||window.event;
varx=d.clientX-b;
vary=d.clientY-c;
varp=a.parentElement;
x=x<p.offsetLeft?p.offsetLeft:x;
x=x>p.offsetLeft+p.offsetWidth-a.offsetWidth?p.offsetLeft+p.offsetWidth-a.offsetWidth:x;

y=y<p.offsetTop?p.offsetTop:y;
y=y>p.offsetTop+p.offsetHeight-a.offsetHeight?p.offsetTop+p.offsetHeight-a.offsetHeight:y;
a.style.left=x+"px";
a.style.top=y+"px";
a.children[1].value=a.children[1].value.replace(/([^d]+)d+([^d]*)/,'$1'+y+'px');
a.children[2].value=a.children[2].value.replace(/([^d]+)d+([^d]*)/,'$1'+x+'px');
};

functionmove(o,e)
{
a=o;
vardiv=o;
vardp=o.parentElement;
document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);
varoleft=o.style.left;
if(oleft==0){
o.style.top=dp.offsetTop+"px";
o.style.left=dp.offsetLeft+"px";
}

b=e.clientX-parseInt(a.style.left);
c=e.clientY-parseInt(a.style.top);
reOrderzIndex(o);
}

//重新调整当期父元素里面的子元素的zIndex
functionreOrderzIndex(o)
{
varop=o.parentElement;
if(!!op.child)
{
op.child.style.zIndex=0;
}
o.style.zIndex=1;
op.child=o;
}
</script>
</head>
<body>
<divid="main"class="main">
<divonmousedown="move(this,event)"><span>1</span><inputname=""type="text"value="拖动我自动获取top值：000"><inputname=""type="text"value="拖动我自动获取left值：000"></div>
<divonmousedown="move(this,event)"><span>2</span><inputname=""type="text"value="拖动我自动获取top值：000"><inputname=""type="text"value="拖动我自动获取left值：000"></div>
<divonmousedown="move(this,event)"><span>3</span><inputname=""type="text"value="拖动我自动获取top值：000"><inputname=""type="text"value="拖动我自动获取left值：000"></div>
</div>
</body>
</html>

Ⅱ js怎么获得鼠标当前坐标

获取鼠标当前坐标的几种方式包括PageX和PageY，这两种方法仅在Firefox中可用，而在IE中则没有。为了解决这个问题，大牛们创造了一个计算公式：PageY=clientY+scrollTop-clientTop。同样地，对于X轴，也有类似的方法：PageX=clientX+scrollLeft-clientLeft。

客户端坐标（clientX/clientY）是从浏览器可视区域的左上角开始测量的，这意味着它会随着滚动条的移动而变化。这使得在处理页面滚动时，使用client坐标更为方便。

屏幕坐标（screenX/screenY）是从屏幕左上角开始计算的，这与W3C标准一致。屏幕坐标可以用来确定鼠标相对于屏幕的绝对位置。

偏移坐标（offsetX/offsetY）是IE特有的，它表示鼠标相对于触发事件元素的内容区域左上角的位置。如果元素有边框，可能会出现负值。

层坐标（layerX/layerY）是Firefox特有的，表示鼠标相对于当前坐标系的位置。如果触发元素没有设置绝对定位或相对定位，层坐标将以页面为参考点。如果有绝对定位或相对定位，则层坐标将改变参考坐标系，以触发元素边框区域的左上角为参考点。

Chrome和Safari浏览器支持所有这些属性，其中offsetX和layerX都是以边框为参考点。下面是一个示例代码，用于获取相对于屏幕的坐标：

document.onmousemove = function(e) {
e = e ? e : window.event;
document.writeln("X:" + e.screenX + "Y:" + e.screenY);
}

Ⅲ JS移动端获取触控位置

1、如抄图位置是一个html中的可编辑内容的div标签，在里边输入文字，会有一个光标。

Ⅳ 求大神js代码 知道A点的坐标，绕着O(原点)旋转任意角度求出旋转后的B坐标。

这是数学题袭啊....

Rotate=function(Source,Angle)//Angle为正时逆时针转动,单位为弧度
{
	varA,R;
	A=Math.atan2(Source.Y,Source.X)//atan2自带坐标系识别,注意X,Y的顺序
	A+=Angle//旋转
	R=Math.sqrt(Source.X*Source.X+Source.Y*Source.Y)//半径
	return{
		X:Math.cos(A)*R,
		Y:Math.sin(A)*R
	}
}
Rotate({X:0,Y:4},-Math.PI/4)

注意,由於牵扯浮点运算,所以你如果调用

Rotate({X:0,Y:4},Math.PI/2)

返回可能会是{X:-4,Y:4.898425415289509e-16}

Y很小但不等於0

当然如果用矩阵变换也是可以写的..

阅读全文

与js算拖动的坐标相关的资料

热点内容
数据流有哪些特征 浏览：645
pc机网络安全检查 浏览：894
51测试程序 浏览：861
安卓手机如何打开daf文件 浏览：534
西部数据用的是哪里的固态颗粒 浏览：597
安卓开发app如何不显示 浏览：48
买家秀哪些网站可以看 浏览：286
怎么找论文中的统计数据 浏览：730
java获取字符串的字节数 浏览：883
老人下载戏曲用什么网站 浏览：537
什么app可以查奢侈品 浏览：222
dfm文件 浏览：541
重庆房东直租app哪个靠谱 浏览：847
win10放文件的格子怎么弄 浏览：664
魅蓝note升级flyme45 浏览：353
怎么让文件夹内容按序列 浏览：408
传文件到电脑但找不到手机文件夹 浏览：943
手机程序禁止自起 浏览：268
301转向代码 浏览：79
苹果6进水有水印换个屏幕多少 浏览：322

友情链接