HTML5의 드래그 앤 드롭 이벤트(Drag and drop)에 대한 자세한 설명

黄舟
풀어 주다: 2017-02-21 13:27:30
원래의
1431명이 탐색했습니다.

브라우저 지원

Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5는 드래그 앤 드롭을 지원합니다.

참고: Safari 5.1.2에서는 드래그 앤 드롭이 지원되지 않습니다.

HTML5 드래그 앤 드롭 예시

<!DOCTYPE html>
<html> 
<head> 
<style type="text/css"> 
#p1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<script type="text/javascript"> 
function allowDrop(ev) 
{ 
ev.preventDefault(); 
} 
 
function drag(ev) 
{ 
ev.dataTransfer.setData("Text",ev.target.id); 
} 
 
function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
} 
</script> 
</head> 
<body> 
 
<p>请把 Aseoe logo的图片拖放到矩形中:p> 
 
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">p> 
<br /> 
<img id="drag1" src="http://www.aseoe.com/statics/images/eoe/logo.png" 
draggable="true" ondragstart="drag(event)" /> 
 
</body> 
</html>
로그인 후 복사



요소를 드래그 가능으로 설정

먼저 요소를 드래그 가능하게 만들려면 draggable 속성을 true로 설정하세요.

드래그할 항목 - ondragstart 및 setData()

그런 다음 언제 요소를 드래그하면 어떤 일이 발생합니까?

위의 예에서 ondragstart 속성은 드래그할 데이터를 지정하는 drag(event) 함수를 호출합니다.

dataTransfer.setData() 메소드는 드래그된 데이터의 데이터 유형과 값을 설정합니다.

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
로그인 후 복사



이 예에서 데이터 유형은 다음과 같습니다. " Text", 값은 드래그 가능한 요소("drag1")의 ID입니다.

위치 위치 - ondragover


ondragover 이벤트는 드래그된 데이터를 위치할 위치를 지정합니다.

기본적으로 데이터/요소는 다른 요소 안에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다.

ondragover 이벤트의 event.preventDefault() 메서드를 호출하여 배치됩니다.

event.preventDefault()
로그인 후 복사



- ondrop


드래그된 데이터가 배치되면 드롭 이벤트가 발생합니다.

위 예에서 ondrop 속성은 drop(event) 함수를 호출합니다.

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
로그인 후 복사



코드 설명:

preventDefault()를 호출하여 브라우저의 기본 데이터 처리를 방지합니다(드롭 이벤트의 기본 동작은 이벤트를 링크로 여는 것입니다)

dataTransfer.getData("Text를 통해 획득) ") method 드래그되는 데이터입니다. 이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.

드래그된 데이터는 드래그된 요소의 ID("drag1")입니다

드래그된 요소를 배치된 요소(대상 요소)에 추가

요약

위는 HTML5의 드래그 앤 드롭 이벤트(Drag and drop)에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www. php.cn)!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!