|
기본 비헤이비어에서는 페이지의 편집 가능한 영역으로 텍스트만 드래그할 수 있습니다. 요소의 여는 태그에
contenteditable
특성을 포함시키면 요소 및 그 자식을 편집할 수 있도록 지정할 수 있습니다. 문서 객체
designMode
속성을
"on"
으로 설정하여 문서 전체를 편집할 수 있게 만들 수도 있습니다.
드래그된 데이터를 허용할 수 있는 요소에 대해
dragenter
,
dragover
및
drop
이벤트를 처리함으로써 페이지에서 다른 드래그인 비헤이비어를 지원할 수 있습니다.
드래그인 지원
드래그인 동작을 처리하기 위해서는 먼저 기본 비헤이비어를 취소해야 합니다. 드롭 대상으로 사용하려는 HTML 요소에서
dragenter
및
dragover
이벤트를 수신합니다. 이들 이벤트에 대한 핸들러에서 전달된 이벤트 객체의
preventDefault()
메서드를 호출합니다. 기본 비헤이비어를 취소하면 편집 불가능한 영역에서 드롭을 수신할 수 있습니다.
드롭된 데이터 받기
ondrop
이벤트에 대한 핸들러에서 드롭된 데이터에 액세스할 수 있습니다.
function doDrop(event){
droppedText = event.dataTransfer.getData("text/plain");
}
dataTransfer.getData()
메서드를 사용하여 데이터를 클립보드에 읽어 들이고 읽을 데이터 형식의 MIME 유형을 전달합니다.
dataTransfer
객체의
types
속성을 사용하여 어떤 데이터 형식을 사용할 수 있는지 알아낼 수 있습니다.
types
배열에는 각각의 사용 가능한 포맷의 MIME 유형 문자열이 들어 있습니다.
dragenter 또는 dragover 이벤트에서 기본 비헤이비어를 취소하면, 문서의 적절한 위치에 드롭된 데이터를 삽입하는 것은 사용자가 해야 합니다. 요소 내에서 마우스 위치를 삽입점으로 변환하는 API는 없습니다. 이러한 한계로 인해 삽입 유형의 드래그 동작을 구현하는 것이 어려울 수 있습니다.
|
|
|
