- HTML5에서는 웹 페이지 내부 또는 웹 페이지 외부에서 드래그 앤 드롭을 할 수 있음.
* 드래그 앤 드롭
- 드래그 앤 드롭은 파일 복사 등에서 일상적으로 사용되는 조작인데, HTML5에서는 웹 페이지의 내부 또는 웹 브라우저의 외부에서 드래그 앤 드롭을 지원함.
- 이로 인해 요소끼리나 웹 브라우저, 다른 소프트웨어 사이에 정보를 주고받을 수 있게 되었음.
* draggable 속성
- 웹 페이지 내에서 드래그할 요소에는 draggable 속성에 "true"를 지정함.
- 원래부터 드래그할 수 있는 요소도 있음.
- 또한 웹 브라우저에 따라서는 선택한 상태가 아니면 텍스트를 드래그할 수 없는 경우도 있음.
<div draggable="true">여행을 떠나는 유미나</div>
* 이벤트 처리
- 드롭할 위치를 설정하는 데는 dropzone 속성을 지정하는 방법이 있지만, 현재는 많이 지원하고 있지 않으므로, 여기서는 이벤트 핸들러를 조작하여 받기로 함.
- 드래그 앤 드롭에서 사용하는 이벤트는 세 가지임.
1) dragstart 이벤트
- 드래그 시작 시에 발생하며, 여기서 전달하고 싶은 값을 설정함.
2) dragover 이벤트
- 드롭 직전에 발생하며, 여기서 기본 처리를 무효로 해 둚.
3) drop 이벤트
- 드롭되었을 때 발생하며, 여기서 데이터를 꺼냄.
- 또한 기본 처리를 무효로 해 둚.
* 드래그 앤 드롭의 예 (FireFox와 Chrome에서 조작)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 |
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>예제</title>
<style>
#zone {
width:200px;
height:100px;
background-color:silver;
}
#dragitem{
color:red;
background-color:pink;
width:100px;
}
</style>
</head>
<body>
<div id="dragitem" draggable="true">여행을 떠나는 유미나</div> // 드래그할 것
<p>
<textarea id="zone"></textarea> // 드롭할 장소
</p>
<script>
var ei = document.getElementById("dragtiem");
var ez = document.getElementById("zone");
ei.ondragstart = function(event) { // 드롭 시작 시 처리
event.dataTransfer.setData("Text", ei.innerHTML);
} // 이벤트 오브젝트에 데이터를 저장
ez.ondragover = function(event) { // 드롭 직전 처리
event.preventDefault(); // 기본 처리를 무효화
}
ez.ondrop = function(event) { // 드롭 시 처리
event.target.innerHTML = "";
var types = event.dataTransfer.types;
if(types) {
for(var i = 0; i < type.length; i++) { // 데이터를 꺼냄
var data = event.dataTransfer.getData(types[i]);
event.target.innerHTML += "[" + types[i] + "]" + data;
}
}
event.preventDefault(); // 기본 처리를 무효화
}
</script>
</body>
</html> |
cs |
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
'Programming > HTML5' 카테고리의 다른 글
| 백그라운드와 오프라인 (0) | 2017.05.19 |
|---|---|
| 스토리지와 파일 (0) | 2017.05.19 |
| 그래픽 (0) | 2017.05.19 |
| GPS와의 연동 (0) | 2017.05.19 |
| 멀티미디어 지원 (0) | 2017.05.19 |
| 태그의 의미 부여 (0) | 2017.05.19 |
| 콘텐츠 모델 (Contents Model) (0) | 2017.05.19 |
| 의미가 바뀐 태그 (0) | 2017.05.19 |
