Javascript のドラッグアンドドロップに関する一連の記事 2-jsチュートリアル-php.cn

Javascript のドラッグアンドドロップに関する一連の記事 2

PHP中文网

リリース： 2016-05-16 19:00:50

オリジナル

937 人が閲覧しました

JavaScript のドラッグで使用される位置決めに関連するいくつかのパラメーター

この記事を読む前に、JavaScript ドラッグアンドドロップシリーズの記事 1 の最初の記事にある offsetParent 属性をご覧ください。ステップバイステップは良い習慣であり、奨励する価値があるからです。
それでは、今日の内容を見てみましょう。
まず、element.offsetLeft プロパティを見てみましょう。
サポートされているブラウザ: Internet Explorer 4.0、Mozilla 1.0、Netscape 6.0、Opera 7.0、Safari 1.0
定義: 現在の要素の左端から、offsetParent によって返されるオブジェクトの左端までを表すピクセル値を返します。プロパティのオフセット。
構文:
leftDis = element.offsetLeft
Internet Explorer の offsetLeft 属性の実装にはバグがあり、現在の要素の offsetParent 属性の値に関係なく、常に Body 要素が使用されます。 offsetLeft を計算するための参考として。幸いなことに、このバグは Internet Explorer 8 Beta 1 で修正されています。 IE は標準として Body 要素の Left-Border から OffsetLeft を計算しますが、他のブラウザは Left-Margin から計算することに注意することが重要です。
テストコード 1:
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">
<html>
<ヘッド>
<メタ http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<タイトル>無題のドキュメントタイトル>
<スタイルタイプ="text/css">
本文{
border:1px 赤一色;
左マージン:0px;
🎜 >{ 位置
:相対
; 左:25px;
上:0px;
border ：1pxソリッドブラック}

スタイル>
<スクリプトタイプ
="text/javascript" 言語="JavaScript"> function offset_init(){
var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent;
var ioffsetLeft=pElement.offsetLeft;
alert(parentObj.tagName);
alert(iオフセット左); }
スクリプト

>
ヘッド>
<ボディ onload
="offset_init()"> p id
="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX span id
="sonObj">测试OffsetParent プロパティspan> p>
ボディ>
html>

IE では、このコードを実行すると、2 つのウィンドウが順にポップアップ表示され、それぞれ「p」と「437」が表示され、それぞれ offsetParent と offsetLeft を示します。下の図では、赤い枠線が Body 要素を表し、黒い枠線が p 要素を表します。これは、IE でも offsetParent が Body 要素ではなく、offsetLeft の計算が Body 要素に基づいていることを証明しています。

図 1: IE7 での結果

このバグは IE 8 Beta 1 で修正されており、それぞれ "p" と "411" を返します。すでに他のブラウザと同じ規格に準拠しています。

図 2: IETester での IE 8 Beta 1 のテスト結果

注: IETester は非常に優れた無料の Web ページテストツールです。さまざまなバージョンの IE に代わって Web ページをレンダリングします。最新バージョン 0.2.3 は、公式 Web サイト //m.sbmmt.com/ からダウンロードできます。個人的には、すべての WEB 開発者は 1 つを持つべきだと思います。
インラインラベル (offsetParent として) 内にラベル (現在の要素として) を埋め込む場合、コードは次のようになります:

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX< ;p id="sonObj">OffsetParent プロパティをテスト

レンダリングはブラウザごとに異なるため、混乱が生じます (WebKit コアブラウザはOffsetParent 属性は Body 要素を指し、IE では OffsetLeft の値が異なります) インラインタグ内にインラインタグを埋め込む場合、問題は特に顕著です (ブラウザごとに OffsetLeft 属性の値が異なるため、これは不合理です)。 )。
さて、offsetLeft についての説明は終わりました。引き続き offsetTop 属性を見てみましょう。
サポートされているブラウザ: Internet Explorer 4.0、Mozilla 1.0、Netscape 6.0、Opera 7.0、Safari 1.0
定義:
現在の要素の上端から、その要素によって返されるオブジェクトまでの距離を指定する値を返します。 offsetTop プロパティの上端からの距離。
構文:
topDis = element.offsetTop
offsetLeft に関する以前のバグは offsetTop 属性にも存在します。同様に、このバグは IE 8 Beta 1 で修正されました。

図 3: IE7 以前の offsetsetTop 属性のバグ。
もちろん、WebKit カーネルブラウザは offsetParent 属性を誤って解釈するため、インラインタグ内にタグを埋め込まないでください。
offsetWidth 属性
サポートされるブラウザ: Internet Explorer 4.0、Mozilla 1.0、Netscape 6.0、Opera 7.0、Safari 1.0
定義:
現在の要素の幅。
構文:
elementWidth = element.offsetWidth
offsetWidth 属性によって指定される幅は、現在の要素の幅パディング境界マージンの合計であることに注意してください。
offsetHeight 属性
サポートされるブラウザ: Internet Explorer 4.0、Mozilla 1.0、Netscape 6.0、Opera 7.0、Safari 1.0
定義:
現在の要素の高さ。
構文:
elementHeight = element.offsetHeight
同様に、offsetWidth 属性によって指定される高さは、現在の要素の高さパディング境界マージンの合計です。
上記の 4 つの属性と前の記事の offsetParent 属性は実際には Dom 仕様の一部ではありませんが、これらの属性は Javascript のドラッグアンドドロップ機能を実現するための核でもあります。したがって、それらをしっかりと理解してください。

Javascript のドラッグ アンド ドロップに関する一連の記事 2

Javascript のドラッグアンドドロップに関する一連の記事 2