HTML5 튜토리얼 - 드래그 앤 드롭-HTML 튜토리얼-php.cn

HTML5 튜토리얼 - 드래그 앤 드롭

黄舟

풀어 주다： 2016-12-27 15:24:08

원래의

1631명이 탐색했습니다.

프론트엔드 프로그래머 여러분, 안녕하세요! HTML5 튜토리얼에 대한 일련의 지식을 설명하게 되어 매우 기쁩니다. 이 기사에서는 주로 HTML5 드래그 앤 드롭 이벤트를 소개합니다.

드래그 앤 드롭은 HTML5 표준의 일부입니다.

드래그 앤 드롭

드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다.

HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 드래그 앤 드롭할 수 있습니다.

브라우저 지원

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

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

HTML5 드래그 앤 드롭 예시

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

코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
<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>
<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>

로그인 후 복사

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

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

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

<img draggable=”true” />

로그인 후 복사

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

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

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

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

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

로그인 후 복사

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

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

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

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

위 내용은 HTML5 튜토리얼-드래그 앤 드롭 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!