HTML 요소로부터 데이터 드래그

Adobe AIR 1.0 이상

기본 비헤이비어를 통해 HTML 페이지의 대부분의 내용을 드래그하여 복사할 수 있습니다. CSS 속성인 -webkit-user-select 및 -webkit-user-drag 를 사용하여 드래그할 수 있는 내용을 제어할 수 있습니다.

dragstart 이벤트에 대해 핸들러에서 기본 드래그아웃 비헤이비어를 재정의합니다. 이벤트 객체의 dataTransfer 속성의 setData() 메서드를 호출하여 사용자의 데이터를 드래그 동작에 놓습니다.

기본 비헤이비어를 사용하지 않을 경우 소스 객체가 어떤 드래그 효과를 지원하는지 나타내려면 dragstart 이벤트에 대해 전달된 이벤트 객체의 dataTransfer.effectAllowed 속성을 설정합니다. 효과를 자유롭게 선택하여 조합할 수 있습니다. 예를 들어 소스 요소가 복사 및 연결 효과를 지원할 경우 속성을 "copyLink" 로 설정합니다.

드래그된 데이터 설정

dataTransfer 속성을 사용하여 dragstart 이벤트의 핸들러에 드래그 동작에 대한 데이터를 추가합니다. dataTransfer.setData() 메서드를 사용하여 데이터를 클립보드에 놓고 전송할 MIME 유형 및 데이터를 전달합니다.

예를 들어 응용 프로그램 id가 imageOfGeorge 인 이미지 요소가 있는 경우 다음과 같은 dragstart 이벤트 핸들러를 사용할 수 있습니다. 이 예에서는 여러 가지 데이터 형식의 George의 사진을 추가하며, 이는 다른 응용 프로그램에서 드래그된 데이터를 사용할 수 있는 가능성을 증가시킵니다. 

function dragStartHandler(event){         
    event.dataTransfer.effectAllowed = "copy"; 
     
    var dragImage = document.getElementById("imageOfGeorge"); 
    var dragFile = new air.File(dragImage.src); 
    event.dataTransfer.setData("text/plain","A picture of George"); 
    event.dataTransfer.setData("image/x-vnd.adobe.air.bitmap", dragImage); 
    event.dataTransfer.setData("application/x-vnd.adobe.air.file-list", 
                                new Array(dragFile)); 
}
참고: dataTransfer 객체의 setData() 메서드를 호출할 때 기본 끌어 놓기 비헤이비어는 어떠한 데이터도 추가하지 않습니다.