HTML5 실제 전투 및 기본 드래그 앤 드롭 분석(드래그 앤 드롭 기록 개요)

드래그 앤 드롭을 언급할 때 JavaScript 훈련 중에 매우 흥미로운 효과가 생각납니다. 바로 드래그 앤 드롭입니다. 마우스를 사용하여 원하는 위치로 개체를 끌 수 있습니다.

JavaScript 드래그 앤 드롭 기능을 갖춘 최초의 브라우저는 IE4였습니다. 그 당시 웹페이지에는 끌어서 놓을 수 있는 개체 유형이 그래픽과 특정 텍스트 두 가지뿐이었습니다. 이미지를 드래그할 때는 이미지 위에 마우스를 놓고 마우스를 누른 채로 드래그하세요. 텍스트를 드래그할 때는 먼저 텍스트를 선택한 후 선택한 텍스트를 이미지처럼 드래그해야 합니다. IE4에서 드래그된 텍스트를 배치할 수 있는 유일한 유효한 대상은 텍스트 상자입니다. IE5.5에서는 한 단계 더 발전하여 웹 페이지의 모든 요소를 ​​끌어서 놓을 수 있습니다(IE6 이상도 이러한 기능을 지원합니다). 브라우저의 점진적인 업데이트와 IE7IE8 및 기타 브라우저의 탄생으로 웹페이지의 모든 내용을 드래그 앤 드롭할 수 있게 되었지만 이는 JavaScript 프로그램을 통해서만 구현됩니다. 다음은 HTML5가 없을 때 드래그 앤 드롭 구현의 작은 예입니다.

　HTML코드

아아앙

JavaScript 코드

아아앙

　CSS 코드

<p id="p1" style="width:100px; height:100px; background:red; position:absolute;">梦龙小站</p>

HTML5가 등장하기 전까지. HTML5는 IE 기반의 드래그 앤 드롭 사양입니다. 기본 드래그 앤 드롭을 지원하는 브라우저에는 Chrome, Safari 3+ 및 Firefox 3.5+가 있습니다.

HTML5의 드래그 앤 드롭은 창 간, 프레임 간, 심지어 애플리케이션 간에도 완벽하게 드래그할 수 있습니다. 드래그 앤 드롭에 대한 브라우저 지원을 통해 이 기능이 용이해졌습니다.

HTML5 실제 전투 및 기본 드래그 분석(1) - 드래그 앤 드롭 기록에 대한 개요, 이것이 모두를 위한 것입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!