자바스크립트 드래그 앤 드롭 시리즈 기사 2-JS 튜토리얼-php.cn

자바스크립트 드래그 앤 드롭 시리즈 기사 2

PHP中文网

풀어 주다： 2016-05-16 19:00:50

원래의

912명이 탐색했습니다.

Javascript 드래그에 사용되는 위치 관련 일부 매개변수

이 글을 읽기 전에 자바스크립트 드래그 앤 드롭 시리즈 첫 번째 글의 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 베타 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" 콘텐츠="text/html; charset=UTF-8" />
<제목>제목 없는 문서제목>
<스타일 유형="text/css">
본문{
테두리:1px 단색 빨간색;
여백-왼쪽 :0px;
                                                🎜 >{직위
:친척
;                왼쪽:25픽셀;
               상단:0픽셀; 테두리
: 1px 솔리드 블랙 ;

}
스타일>
스크립트 유형="text/javascript" 언어="JavaScript">
함수 offset_init(){
var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent;

var ioffsetLeft=pElement.offsetLeft;
           경보(parentObj.tagName);
           (ioffsetLeft);
        }

스크립트>
머리>
<본문 온로드="offset_init()">
<p id="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<span id="sonObj">测试OffsetParent属性span>
p>본문>
html>

IE에서 이 코드를 실행하면 두 개의 창이 차례로 팝업되어 각각 offsetParent와 offsetLeft를 나타내는 "p"와 "437"을 표시합니다. 아래 그림에서 빨간색 테두리는 Body 요소를 나타내고 검은색 테두리는 p 요소를 나타냅니다. 이는 IE에서도 offsetParent가 Body 요소가 아니며 offsetLeft 계산이 Body 요소를 기반으로 함을 증명합니다.

그림 1: IE7의 결과

이 버그는 IE 8 베타 1에서 수정되었으며 각각 "p"와 "411"을 반환합니다. 이미 다른 브라우저와 동일한 표준을 준수하고 있습니다.

그림 2: IETester에서 IE 8 Beta 1의 테스트 결과

참고: IETester는 매우 우수한 무료 웹 페이지 테스트 도구입니다. 다양한 버전의 IE를 대신하여 웹 페이지를 렌더링합니다. 최신 버전 0.2.3은 공식 홈페이지 http://www.php.cn/에서 다운로드할 수 있습니다. 개인적으로 나는 모든 웹 개발자가 하나쯤은 가지고 있어야 한다고 생각합니다.
인라인 라벨(offsetParent) 내에 라벨(현재 요소)을 삽입하는 경우 코드는 다음과 같습니다.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX< ;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 베타 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 속성이 가리키는 높이는 현재 요소의 높이 패딩 테두리 여백의 합입니다.
위에 언급된 네 가지 속성과 이전 기사의 offsetParent 속성은 실제로 Dom 사양의 일부가 아니지만, 현재 브라우저에서는 이를 구현하고 있으며 Javascript 드래그 앤 드롭 기능을 구현하는 핵심이기도 합니다. 그러니 철저하게 이해하시기 바랍니다.