브라우저 지원이 프로젝트 하다보면 중요성을 깨닫는다....
간단한 드로우 앤 드롭 예제이다.
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<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>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
예제 설명
<img draggable="true"> 요소를 드래그 가능하게 만드는 것이다. 특성을 true로 한다.
ondragstart 속성 : 드래그할 데이터를 지정하는 drag(event) 함수를 호출
dataTransfer.setData() : 끌어온 데이터의 데이터 유형과 값을 설정
//이 경우 데이터 유형은 "텍스트"이고 값은 드래그할 수 있는 요소("drag1")의 id입니다.
// 즉 끌고 올 데이터는 이미지 이다.
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
ondragover 이벤트 : 끌어온 데이터를 놓을 수 있는 위치를 지정한다.
기본적으로 데이터/요소는 다른 요소에 놓을 수 없습니다.
삭제를 허용하려면 요소의 기본 처리를 방지해야 합니다.
이는 event.preventDefault() 메소드를 호출하여 수행됩니다.
ondrop 이벤트 : drop(event) 함수를 호출
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
drop 함수 설명
1. 데이터의 브라우저 기본 처리를 방지하려면 preventDefault()를 호출하십시오(기본값은 놓을 때 링크로 열림).
2. dataTransfer.getData() 메서드로 드래그한 데이터를 가져옵니다.
이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 리턴합니다.
3. 드래그된 데이터는 드래그된 요소("drag1")의 id입니다. (즉 이미지)
4. 드래그한 요소를 드롭 요소에 추가
'Web > HTML' 카테고리의 다른 글
| HTML 웹 작업자 API (0) | 2023.01.04 |
|---|---|
| HTML 웹 저장소 API (0) | 2023.01.04 |
| HTML 위치 정보 API (0) | 2023.01.03 |
| HTML 플러그인 (0) | 2023.01.03 |
| HTML 미디어 (0) | 2023.01.03 |