導航:首頁 > 編程語言 > 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算拖動的坐標相關的資料

熱點內容
微博一鍵發布js 瀏覽：8
fx1s用什麼編程電纜 瀏覽：205
有哪些app可以上網課免費 瀏覽：332
網頁按鈕點擊提交資料庫 瀏覽：402
數控車床自動換刀怎麼編程 瀏覽：861
java程序員簡歷 瀏覽：570
appstore充值花的是哪裡的錢 瀏覽：67
本地網路服務怎麼打開 瀏覽：112
如何更改蘋果電話APP圖標 瀏覽：834
找迴文件中的圖片 瀏覽：773
域名資料庫有什麼用 瀏覽：594
保存有哪些文件j 瀏覽：111
linux源碼封裝成庫a文件 瀏覽：535
廣數銑圓形怎麼編程 瀏覽：385
成都金牛區哪裡有學編程的 瀏覽：861
蘋果手機如何建立一個文件夾放照片 瀏覽：933
編程磁卡怎麼充錢 瀏覽：985
vtf文件用什麼打開 瀏覽：949
怎樣上傳pdf文件到班級釘釘 瀏覽：867
視頻文件後綴名被更改 瀏覽：89

友情鏈接