ホームページ > 記事 > ウェブフロントエンド > 座標_JavaScript スキルを取得するためのレイヤーの位置決めと移動のための JavaScript および Div 実装コード

座標_JavaScript スキルを取得するためのレイヤーの位置決めと移動のための JavaScript および Div 実装コード

WBOYオリジナル: 2016-05-16 18:20:05906ブラウズ

1: レイヤーを移動して、絶対位置を指定するポイントの x 軸と y 軸の座標を取得します (注: 垂直プルダウンボックスは x 軸と y 軸の座標値に影響します)

コードをコピーコードは次のとおりです。

 
var x,y,z,down= false,obj 
function init(){ 
 obj=event.srcElement //イベント トリガー オブジェクト
obj.setCapture() //現在のオブジェクトに属するマウス キャプチャを設定します
z=obj。 style.zIndex //オブジェクトの Z 軸座標値を取得します
/ /現在のレイヤーが最前面に表示されるように、オブジェクトの Z 軸座標値を 100 に設定します
obj.style。 zIndex=100 
x=event.offsetX //イベントをトリガーしたオブジェクトを基準としたマウス ポインターの位置の X 座標を取得します。 座標 
y=event.offsetY //マウス ポインターの相対位置の Y 座標を取得します。イベントをトリガーしたオブジェクトへ 
down=true //ブール値、マウスが押されたかどうかを判断します。true は押されたことを意味し、false は押されていないことを意味します。 Press 
} 
function moveit(){ 
/ /マウスが押され、同じオブジェクトでonmouseoverイベントとonmousedownイベントが発生したと判断 
if(down&&event.srcElement==obj){ 
with(obj.style){ 
/*Xを設定ドキュメントの X 軸方向のスクロール距離に、ドキュメント オブジェクトの X 座標値からマウスを押したときの相対ポインタ位置を引いた現在のマウス ポインタを加えたオブジェクトの座標値。イベントをトリガーしたオブジェクト*/ 
// posLeft=event.x-x; 
posLeft=document.body.scrollLeftevent.x-x; 
/*オブジェクトの Y 座標値を Y に設定します軸方向のスクロール距離に現在のマウス ポインターを加えた値は、ドキュメント オブジェクトの Y 座標値から、マウスが押されたときにイベントをトリガーしたオブジェクトを基準としたポインター位置の Y 座標を引いた値に相当します */ 
/ / posTop=event.y-y; 
posTop=document.body.scrollTopevent.y-y; 
window.status="posLeft=" posLeft ",posTop=" posTop; "clientX="event.clientX"clientY="event.clientY"scrollLeft="document.body.scrollLeft"scrollTop="document.body.scrollTop",event.y="event.y",event.x" イベント。 x; 
} 
 } 
} 
function stopdrag(){ 
//onmouseup イベントがトリガーされると、マウスが放されたことを意味するため、down 変数の値を次のように設定します。 false 
down=false 
obj.style.zIndex= z //オブジェクトの Z 軸座標値を復元します
obj.releaseCapture() //現在のオブジェクトのマウス キャプチャを解除します
 //alert("X:" obj.style.left ";Y:" obj.style .top); 


 