최신 웹 개발 튜토리얼

HTML5의 드래그 앤 드롭

❮ 이전 다음 장 ❯

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

직사각형으로 상기 이미지를 드래그.

HTML에서

HTML5의 작업 초안 사양은 드래그 앤 드롭을 지원합니다. HTML5는 드래그 기능을 포함하여 낙하의 다른 종류를 지원합니다 :

  • 드래그 앤 드롭 텍스트와 HTML 코드
  • 드래그 앤 드롭 HTML 요소
  • 드래그 앤 드롭 파일

필요한 행동을 바탕으로, 위의 유형 중 하나를 사용할 수 있습니다. HTML 엘리먼트가 그것의 현재 위치를 이동시키기위한 드래그하면, 그 ID가 목적지 부모 요소로 전송 참고; 그래서 텍스트를 전송하고 첫 번째 그룹으로 간주 될 수있다.

구글의 웹 기반 전자 메일 응용 프로그램 Gmail은 최신 구글 크롬 브라우저와 애플의 사파리 (5.x의)의 이미지와 첨부 파일 드래그 앤 드롭을 지원합니다. 그리고 구글 이미지 검색은 드래그 앤 드롭을 지원합니다.

끌어서 놓기

드래그 앤 드롭 매우 일반적인 기능입니다. 당신이 때이다 "grab" 객체를 다른 위치로 드래그합니다.

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

브라우저 지원

테이블의 숫자는 완벽하게 드래그 앤 드롭을 지원하는 최초의 브라우저 버전을 지정합니다.

API
Drag and Drop 4.0 9.0 3.5 6.0 12.0

HTML의 드래그 앤 드롭 예

아래의 예는 간단한 드래그 앤 드롭 예입니다 :

예

<!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>
»그것을 자신을 시도

그것은 복잡하게 보이지만, 드래그 앤 드롭 이벤트의 모든 다른 부분을 통과 할 수 있습니다.

Element의 드래그 가능한 확인

첫째 : 요소가 드래그 할 수 있도록하기위한 설정 draggable 로 속성을 true :

<img draggable="true">

ondragstart과 - 무엇을 끕니다 setData()

그런 요소를 드래그 할 때 발생해야하는지 지정합니다.

위의 예에서, ondragstart 특성은 함수 호출 drag(event) , 즉 데이터를 드래그 할 내용을 지정.

dataTransfer. setData() dataTransfer. setData() 메소드는 데이터 유형 및 드래그 된 데이터의 값을 설정한다 :

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

이 경우에, 데이터 유형은 "text" 과 값은 드래그 요소의 ID이다 ("drag1") .

어디 드롭하는 - ondragover

ondragover 드래그 된 데이터가 삭제 될 수있는 이벤트를 지정한다.

기본적으로, 데이터 / 요소는 다른 요소에서 삭제할 수 없습니다. 드롭을 허용하려면, 우리는 요소의 기본 처리를 방지해야합니다.

이것은 호출하여 수행되는 event. preventDefault() event. preventDefault() 위한 방법 ondragover 이벤트 :

event . preventDefault()

드롭을 수행 - ondrop

드래그 된 데이터가 삭제 된 경우, 낙하 이벤트가 발생한다.

위의 예에서, ondrop 특성은 함수 호출 drop(event) :

function drop(ev) {
    ev. preventDefault() ;
    var data = ev.dataTransfer. getData("text") ;
    ev.target. appendChild(document.getElementById(data) );
}

코드 설명 :

  • 전화 preventDefault() 데이터의 브라우저의 기본 처리를 방지하기 위해 (default is open as link on drop)
  • 로 드래그 된 데이터 가져 오기 dataTransfer. getData() dataTransfer. getData() 방법. 동일한 타입으로 설정되어 있던 데이터 반환 방법이 setData() 메소드
  • 드래그 된 데이터 드래그 요소의 ID이다 ("drag1")
  • 로 끌어 요소를 추가 drop 소자

앞뒤로 드래그 이미지
드래그하는 방법 (and drop) 화상 앞뒤로 둘 사이 <div> 요소.

❮ 이전 다음 장 ❯