HTML5 드래그 앤 드롭: 드래그 앤 드롭은 무엇을 의미하나요? 그것을 사용하는 방법?-H5 튜토리얼-php.cn

HTML5 드래그 앤 드롭: 드래그 앤 드롭은 무엇을 의미하나요? 그것을 사용하는 방법?

寻∝梦

풀어 주다： 2018-08-13 19:11:34

원래의

2819명이 탐색했습니다.

HTML5는 이제 매우 인기가 높습니다. 이 새로운 요소에 대해 알아 보겠습니다. 이 기사에서는 주로 HTML5의 드래그 앤 드롭 요소가 무엇인지, 그리고 이를 사용하는 방법에 대해 설명합니다.

HTML5에서 드래그 앤 드롭은 무엇을 의미하나요?

드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다. 에서 끌어서 놓기의 목적은 개체를 배치하려는 위치에 놓을 수 있도록 하는 것입니다. HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 드래그 앤 드롭할 수 있습니다.

드래그 앤 드롭은 각각 무엇을 의미하나요?

darg: 이벤트 본문은 드래그된 요소이며 드래그된 요소를 드래그 앤 드롭할 때 트리거됩니다.

drop: 이벤트 본문은 대상 요소이며, 대상 요소가 드래그 앤 드롭 요소를 완전히 수락할 때 트리거됩니다.

브라우저 지원

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 드래그를 지원합니다.

참고: Safari 5.1.2는 드래그를 지원하지 않습니다.

HTML5 드래그 앤 드롭 사용 예

다음 예는 간단한 드래그 앤 드롭 예입니다.

예는 다음과 같습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
<script> 
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> 
<div id="div1" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div> 
<img id="drag1" src="img_logo.gif" draggable="true" 
ondragstart="drag(event)" width="336" height="69"> 
</body> 
</html>

로그인 후 복사

조금 복잡하지만 드래그 앤 드롭 이벤트의 여러 부분을 별도로 연구할 수 있습니다.

드래그 앤 드롭 이벤트 실행을 위한 세부 단계:

1. 요소를 드래그 가능하게 설정합니다.

먼저 요소를 드래그 가능하게 하려면 draggable 속성을 true로 설정합니다.

<img draggable="true">

로그인 후 복사

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

그런 다음 요소를 드래그할 때 어떤 일이 발생하는지 지정하세요.

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

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

function drag(ev)        
{
ev.dataTransfer.setData("Text",ev.target.id);       
}

로그인 후 복사

이 예에서 데이터 유형은 "텍스트"이고 값은 드래그 가능한 요소의 ID("drag1")입니다.

팁: 이 사이트의 "ondragstart 이벤트" 섹션에서 더 유용한 정보를 배울 수 있습니다!

2. 배치 위치 - ondragover

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

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

ondragover 이벤트의 event.preventDefault() 메소드를 호출하면 됩니다:

event.preventDefault()

3. Place - 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") 메소드를 통해 드래그한 데이터를 가져옵니다. 이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.

드래그된 데이터는 드래그된 요소의 ID("drag1")이며, 드래그된 요소는 배치된 요소(대상 요소)에 추가됩니다.

【관련 추천】

HTML을 처음부터 배울 수 있는 HTML의 기본 요소

HTML과 HTML5의 개발 역사

위 내용은 HTML5 드래그 앤 드롭: 드래그 앤 드롭은 무엇을 의미하나요? 그것을 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!