HTML의 드래그 앤 드롭Adobe AIR 1.0 이상 HTML 기반 응용 프로그램 내부로 또는 외부로(또는 HTMLLoader에 표시된 HTML 내부로 또는 외부로) 데이터를 드래그할 경우 HTML 끌어 놓기 이벤트를 사용할 수 있습니다. HTML 끌어 놓기 API를 사용하여 HTML 내용의 DOM 요소 내부로 또는 외부로 드래그할 수 있습니다. 참고: 또한 HTML 내용이 포함된 HTMLLoader 객체에서 이벤트를 청취함으로써 AIR NativeDragEvent 및 NativeDragManager API를 사용할 수도 있습니다. 그러나 HTML API가 HTML DOM과 더 잘 통합되며 기본 비헤이비어를 제어할 수 있습니다.
기본 끌어 놓기 비헤이비어HTML 환경은 텍스트, 이미지 및 URL과 관련된 드래그 앤 드롭 동작의 기본 비헤이비어를 제공합니다. 기본 비헤이비어를 사용하여 요소로부터 항상 이러한 유형의 데이터를 드래그할 수 있습니다. 그러나 텍스트만 요소로 드래그할 수 있으며, 페이지의 편집 가능 영역의 요소로만 드래그할 수 있습니다. 페이지의 편집 가능 영역 간에 또는 편집 가능 영역 내에서 텍스트를 드래그할 때 기본 비헤이비어는 이동 작업을 수행합니다. 편집 불가능 영역 또는 응용 프로그램 외부에서 편집 가능 영역으로 텍스트를 드래그할 때 기본 비헤이비어는 복사 작업을 수행합니다. 직접 끌어 놓기 이벤트를 처리하여 기본 비헤이비어를 재정의할 수 있습니다. 기본 비헤이비어를 취소하려면 끌어 놓기 이벤트를 위해 전달된 객체의 preventDefault() 메서드를 호출해야 합니다. 그런 다음 드롭 대상에 데이터를 삽입하고 필요에 따라 드래그 소스에서 데이터를 제거하여 선택한 작업을 수행합니다. 기본적으로 사용자는 어떤 텍스트든 선택 및 드래그할 수 있으며 이미지 및 링크도 드래그할 수 있습니다. WebKit CSS 속성인 -webkit-user-select를 사용하여 HTML 요소를 선택하는 방법을 제어할 수 있습니다. 예를 들어 -webkit-user-select를 none으로 설정할 경우 요소 내용을 선택할 수 없으며 따라서 드래그할 수도 없습니다. 또한 -webkit-user-drag CSS 속성을 사용하여 요소 전체를 드래그할 수 있는지 여부를 제어할 수 있습니다. 그러나 요소의 내용은 별도로 처리됩니다. 텍스트의 일부만 선택하여 드래그할 수도 있습니다. 자세한 내용은 AIR에서의 CSS을 참조하십시오. HTML에서의 끌어 놓기 이벤트드래그가 시작되는 시작자 요소에 의해 전달되는 이벤트는 다음과 같습니다.
드래그 대상에 의해 전달되는 이벤트는 다음과 같습니다.
이들 이벤트에 대한 응답으로 전달되는 이벤트 객체는 마우스 이벤트와 유사합니다. (clientX, clientY) 및 (screenX, screenY)와 같은 마우스 이벤트 속성을 사용하여 마우스 위치를 판별할 수 있습니다. 드래그 이벤트 객체의 가장 중요한 속성은 드래그되는 데이터가 포함되는 dataTransfer입니다. dataTransfer 객체에는 다음과 같은 속성 및 메서드가 들어 있습니다.
HTML 끌어 놓기를 위한 MIME 유형HTML 끌어 놓기 이벤트의 dataTransfer 객체와 함께 사용할 수 있는 MIME 유형은 다음과 같습니다.
응용 프로그램에서 정의한 문자열을 포함하여 기타 MIME 문자열도 사용할 수 있습니다. 그러나 다른 응용 프로그램에서 전송된 데이터를 인식하지 못하거나 사용하지 못할 수 있습니다. 데이터를 해당 포맷으로 dataTransfer 객체에 추가하는 것은 사용자가 해야 합니다. 중요: 응용 프로그램 샌드박스에서 실행되는 코드만 드롭된 파일에 액세스할 수 있습니다. 비 응용 프로그램 샌드박스 내의 File 객체 속성을 읽거나 설정하려 할 경우 보안 오류가 발생합니다. 자세한 내용은 비 응용 프로그램 HTML 샌드박스에서 파일 드롭 처리를 참조하십시오.
HTML에서의 드래그 효과드래그 동작의 시작자는 dragstart 이벤트의 핸들러에서 dataTransfer.effectAllowed 속성을 설정하여 허용되는 드래그 효과를 제한할 수 있습니다. 다음과 같은 문자열 값이 사용될 수 있습니다.
드래그 동작의 대상은 dataTransfer.dropEffect 속성을 설정하여 사용자가 드롭을 완료할 경우 수행할 작업을 나타냅니다. 드롭 효과가 허용되는 작업 중 하나인 경우 시스템은 적절한 복사, 이동 또는 연결 커서를 표시합니다. 그렇지 않은 경우 시스템은 사용 불가 커서를 표시합니다. 대상이 드롭 효과를 설정하지 않은 경우 사용자는 수정자 키를 사용하여 허용되는 작업 중에서 선택할 수 있습니다. dragover 및 dragenter 이벤트에 대한 핸들러에서 dropEffect 값을 설정합니다. function doDragStart(event) {
event.dataTransfer.setData("text/plain","Text to drag");
event.dataTransfer.effectAllowed = "copyMove";
}
function doDragOver(event) {
event.dataTransfer.dropEffect = "copy";
}
function doDragEnter(event) {
event.dataTransfer.dropEffect = "copy";
}
참고: dragenter에 대한 핸들러에서 항상 dropEffect 속성을 설정해야 하지만 다음 dragover 이벤트가 기본값으로 속성을 재설정함을 기억하십시오. 두 가지 이벤트에 대한 응답으로 dropEffect를 설정합니다.
|
|
