[Javascript] API 활용 - drag and drop

[모던자바스크립트] API활용

 

 

19.1 드래그 앤 드롭(DnD) API

: HTML요소나 로컬 파일을 마우스로 끌어서옮길 수 있으며, 다른 요소에 드롭할 수도 있습니다. 이때 드래그한 요소 또는 파일의 데이터는 드롭 타깃 요소에 전달됩니다. 

 

 

19.1.1 HTML 요소를 드래그할 수 있게 만들기 

 

 HTML 요소에 draggable 속성을 지정합니다. daraggable속성에는 논리값을 지정합니다. ture  > drag , false > drag x 

<div draggable="true">드래그할 수 있습니다.</div>

이 속성을 지정하지 않거나 Auto로 지정하면 해당 HTML 요소의 기본값을 사용합니다.

href 속성을 지정한 a 요소와 src속성을 지정한 img 요소는 기본적으로 드래그할 수있또록 만들어져 있습니다.

 

 

19.1.2 드래그 이벤트와 드롭 이벤트

: HTML요소 또는 파일을 드래그하거나 드롭할 때의 처리는 이벤트에 반응하는 이벤트 처리기 안에 작성합니다.

: HTML 드래그 앤 드롭은 DOM event model 과 drag events 를  mouse events 로부터 상속받습니다.

 

이벤트 이름	설명
dragstart	드래그를 시작할 때 발생
drag	드래그를 하는 동안 발생
dragend	드래그가 끝났을 때 발생
dragenter	마우스 포인터가 드롭 요소의 경계선 안쪽으로 들어갈 때 발생
dragover	마우스 포인터가 드롭 요소의 결계선 안쪽에 있을 때 발생
dragleave	마우스 포인터가 드롭 요소의 경계선 바깥으로 나왔을 때 발생
drop	요소에 드롭할 때 발생

 

drag, dragover 이벤트는 마우스가 움직이지 않는 상태에서도 주기적으로 발생합니다 

이 이벤트 객체는 마우스 이벤트의 프로퍼티와 메서드를 상속받습니다. 

 

: 모든 드래그 이벤트는 글로벌 이벤트 핸들러와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 

 

 

19.1.3 데이터 전달하기

: 모든 드래그 앤 드롭 이벤트는 dataTransfer 프로퍼티를 갖고 있습니다. 

dataTransfer 프로퍼티의 값은 DataTransfer 객체이며, 이 객체로 드래그 타깃 요소가 드롭 타깃 요소에 데이터를 전달 할 수 있습니다. 

 

 

> 드래그 앤 드롭으로 데이터를 전달 할 수 있습니다.

 

요소 또는 파일     --------드래그 ----->  (드롭) 요소 

 

 

[ DataTransfer 객체의 프로퍼티와 메서드]

프로퍼티 이름/ 메서드 이름	설명
types	setData 메서드로 설정한 데이터 타입 목록
files	드래그한 파일 객체 목록
efferctAllowed	드래그 타깃 요소가 허용하는 작업의 유형 ("none"."copy"."copyLink"."copyMove"."link"."linkMove". "move"."all","uninitialized")
dropEffect	드롭 타깃 요소에 표시하는 효과("none"."copy"."move","link")
setData(format, data)	드래그 타깃 요소의 데이터(data) 타입을 특정 데이터 타입 (format)으로 설정한다.
getDate(format)	드롭 타깃 요소에서 데이터 득정 타입(format)으로 가져온다.
clearData(format)	format 타입으로 저장된 데이터를 삭제한다. format을 지정하지 않으면 모든 데이터를 삭제한다.
setDragImage(element x,y)	드래그 이미지(드래그 중에 표시되는 이미지)를 설정한다. element는 Img 요소, x는 이미지 수평 오프셋, y는 이미지의 수직 오프셋
addElement(element)	드래그 타깃의 HTML 요소(element를 드롭 타깃에 추가한다. 이 메서드를 호출하지 않아도 드롭하는 요소 자체가 드래그 타깃의 HTML요소가 된다.

 

 

> 드래그 타깃 요소에서 드롭 타깃 요소에 데이터를 전달할 때는 다음과 같은 순서를 따릅니다.

1) 드래그 타깃 요소의 Dragstart 이벤트 처리기 안에서 dataTransfe 프로퍼티의 setData 메서드에 데이터 타입을 지정한 데이터를 추가합니다.

e.dataTransfer.setData("text/plain". value);

 

2) 드롭 타깃 요소의 dragover 이벤트 처리기 안에서 브라우저의 기본 동작을 취소합니다.

드래그 타깃 요소가 드롭 타깃 요소 위에 올라가면 브라우저의 기본 동작인 drop이벤트가 취소되기 때문입니다.

e.preventDefault();

 

3) 드롭 타깃 요소의 drop 이벤트 처리기 안에서 dataTransfer 프로퍼티의 getData 메서드를 사용해서 데이터를 지정한 데이터 타입으로 가져옵니다. 

var value = e.dataTransfer.getData("text/plain");

 

데이터는 데이터 타입(format)별로 하나만 전달할 수 있습니다.

setData 메서드로 가타은 데이터 타입의 데이터를 두 번 설정하면 이전에 설정한 데이터를 덮어씁니다.

setData와 getData메서드로 지정할 수 있는 주요 데이터 타입은 아래 표와 같습니다.

 

[setData와 getData 메서드로 지정할 수 있는 데이터 타입(format)]

type값	설명
"text/plain"	일반 텍스트
"text/html"	HTML 문자열
"text/uri-list"	URL문자열 목록

 

 

19.1.4 드래그 앤 드롭 예제

 

• 색상을 설정하는 Input 요소를 div 요소에 드래그 앤 드롭해서 div 요소의 배경색을 설정합니다. 
• 이때 drop 이벤트 처리기 안에서 브라우저의 기본 동작을 취소합니다. 이것은 링크나 파일이 드롭되면 브라우저가 그것을 표시하려고 하기 때문입니다. 사용자 편의를 위해 마련된 기능이지만 드래그 앤 드롭 을 자체적으로 구현하려면 이러한 기본 동작을 취소해 주어야 합니다.

 

드롭하는 영역을 사용자에게 알린다.

드롭 타깃 요소가 드롭하는 영역에 들어갔을 때, 그곳이 드롭할 장소임을 사용자에게 알리면 사용자 편의성이 높아질 것입니다. 

예를 들어 예제에서 드롭타깃 요소의 영역에 들어갔을 때는 영역 테두리를 빨간색으로 바꾸고 , 밖으로 나오거나 드롭했을 때는 회색으로 되돌리면 드롭하는 영역을 사용자에게 효과적으로 알릴 수 있습니다. 

이를 구현하려면 window 의 onload 이벤트 리스너에 다음 코드를 추가합니다.

 

 

 

See the Pen [Javascript] drag and drop event by jeongahlee (@jeongahlee) on CodePen.

 

 

 

 

See the Pen [Javascript] drag and drop background color change by jeongahlee (@jeongahlee) on CodePen.

 

 

 

https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99508F3B5BAA636B30

 

 

 

참고출처 : https://developer.mozilla.org/ko/docs/Web/API/HTML_%EB%93%9C%EB%9E%98%EA%B7%B8_%EC%95%A4_%EB%93%9C%EB%A1%AD_API

HTML 드래그 앤 드롭 API