-
728x90반응형
Drag and Drop
드래그 앤 드롭(drag and drop) API
드래그 앤 드롭 API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그할 수 있도록 설정해준다.
HTML5 이전에 이와 같은 기능을 구현하기 위해서는 엄청나게 많고 복잡한 스크립트를 작성해야 했다.
하지만 HTML5에서는 드래그 앤 드롭(drag and drop) 기능이 표준 권고안에 포함되어 간단하게 사용할 수 있게 되었다.
현재 주요 웹 브라우저들은 모두 이 기능을 지원하며, 따라서 웹 페이지 내의 모든 요소는 드래그될 수 있다.
드래그 앤 드롭 API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
요소
드래그 앤 드롭
9.0
4.0
3.5
6.0
12.0
드래그 앤 드롭 이벤트
마우스로 객체(object)를 드래그 해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 된다.
다음 표는 드래그 앤 드롭시 일어나는 이벤트를 순서대로 보여준다.
이벤트
설명
dragstart
사용자가 객체(object)를 드래그하려고 시작할 때 발생함.
dragenter
마우스가 대상 객체의 위로 처음 진입할 때 발생함.
dragover
드래그하면서 마우스가 대상 객체의 위에 자리 잡고 있을 때 발생함.
drag
대상 객체를 드래그하면서 마우스를 움직일 때 발생함.
drop
드래그가 끝나서 드래그하던 객체를 놓는 장소에 위치한 객체에서 발생함.
dragleave
드래그가 끝나서 마우스가 대상 객체의 위에서 벗어날 때 발생함.
dragend
대상 객체를 드래그 하다가 마우스 버튼을 놓는 순간 발생함.
Data Transfer 객체
드래그 앤 드롭 이벤트를 위한 모든 이벤트 리스너 메소드(event listener method)는 DataTransfer 객체를 반환한다.
이렇게 반환된 DataTransfer 객체는 드래그 앤 드롭 동작에 관한 정보를 가지고 있게 된다.
draggable 속성
웹 페이지 내의 모든 요소는 draggable 속성을 사용하여 드래그될 수 있는 객체(draggable object)로 변환될 수 있다.
ondragstart 속성
드래그될 수 있는 객체로 만든 후에는 ondragstart 속성을 통해 DataTransfer 객체의 setData( ) 메소드를 호출한다.
setData( ) 메소드는 드래그되는 대상 객체의 데이터(data)와 타입(data type)을 설정한다.
ondragover 속성
ondragover 속성은 드래그되는 대상 객체가 어느 요소 위에 놓일 수 있는지를 설정한다.
ondrop 속성
드래그하던 객체를 놓으면 drop 이벤트가 발생한다.
ondrop 속성을 이용하여 drop 이벤트에 대한 동작을 설정할 수 있다.
예제
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 API Drag and Drop</title><style>div {width: 180px;height: 280px;margin: 10px;padding: 10px;border: solid 15px #8B4513;float: left;}</style></head><body><h1>드래그 앤 드롭을 이용한 객체의 이동</h1><p>모나리자 그림을 드래그해서 옆의 사각형으로 옮겨보세요!</p><div ondrop="drop(event)" ondragover="dragEnter(event)"><img id="monalisa" width="180" height="280" src="http://tcpschool.com/examples/images/img_monalisa.png" draggable="true" ondragstart="drag(event)"></div><div ondrop="drop(event)" ondragover="dragEnter(event)"></div><script>function dragEnter(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></body></html>cs 실행결과 :
드래그 앤 드롭을 이용한 객체의 이동
모나리자 그림을 드래그해서 옆의 사각형으로 옮겨보세요!
728x90반응형'Mark Up > Html' 카테고리의 다른 글
Application Cache (0) 2018.10.12 Web Storage (0) 2018.10.11 Geolocation (0) 2018.10.11 Canvas vs SVG (0) 2018.10.11 SVG (0) 2018.10.11
