HTML5 드래그 앤 드롭（Drag & Drop）

일. 속성 설정

draggable="true"

href 속성이 있는 a 태그와 img 태그는 기본적으로 드래그 앤 드롭이 가능하지만, 다른 태그는 이 속성을 설정해야 합니다

이. 이벤트

drag : 요소가 드래그될 때 드래그 요소에 의해 빈번하게 트리거되는 이벤트 (수백 밀리초마다 트리거됨)
dragstart : 드래그 시작 시 드래그 요소에 의해 트리거되는 이벤트
dragend : 드래그 종료 시 드래그 요소에 의해 트리거되는 이벤트
dragover : 드래그 요소가 드롭 영역에 들어갈 때 드롭 요소에 의해 빈번하게 트리거되는 이벤트 (수백 밀리초마다 트리거됨)
dragenter : 드래그 요소가 드롭 영역에 들어갈 때 드롭 요소에 의해 트리거되는 이벤트
dragleave : 드래그 요소가 드롭 영역을 떠날 때 드롭 요소에 의해 트리거되는 이벤트
drop : 드래그 요소가 드롭 영역에 드롭될 때 드롭 요소에 의해 트리거되는 이벤트

주의: drag 와 dragover 는 지속적으로 트리거됩니다

파일을 브라우저에 드래그 앤 드롭할 때, dragover 와 drop 이벤트 핸들러에서 preventDefault 해야 합니다. 다른 소프트웨어이나 파일에서 무언가를 드래그해 올 때, 특히 이미지인 경우, 기본 동작이 브라우저를 현재 페이지에서 드래그 요소가 가리키는 리소스로 리디렉션하기 때문입니다. 실제 테스트 결과, 2 개 이벤트 핸들러 모두에서 기본 동작을 방지해야 합니다

주의: dragstart 이벤트 트리거 후, 다른 요소의 mousemove, mouseover, mouseenter, mouseleave, mouseout 이벤트는 더 이상 트리거되지 않습니다

이벤트 트리거 순서:

dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

이벤트 객체:

DragEvent, [object MouseEvent] 객체에서 상속되었으며, 실제로는 {DataTransfer} dataTransfer 속성이 추가된 것입니다

이벤트 객체의 중요한 속성:

effectAllowed 와 dropEffect 의 주요 역할은 드래그 작업 중 마우스 포인터 유형을 구성하여 사용자에게 후속 실행 가능 작업을 알리는 것입니다. 부수적인 역할은 drop 이벤트 트리거 여부를 제어하는 것입니다. 금지 포인터 스타일이 표시될 때, 타겟 요소의 drop 이벤트는 트리거되지 않습니다.

주의: effectAllowed 는 dragstart 에서만 설정 가능하고, dropEffect 는 dragover 에서만 설정 가능합니다

자세한 정보는 HTML5 마법당: Drag & Drop API 완전 이해 를 참조하십시오

삼. 호환성

findmebyip 에서는 drag 이 전체 브라우저 호환이라고 하지만, 실제로 IE 는 가장 일찍 drag 을 구현했지만, [IE10-] 지원도는 매우 낮아 무시할 수 있습니다 (선택된 텍스트에 대해서만 유효하며, img 요소, a[href] 요소, input[type=text]/textarea 요소에서만 작동하고 draggable="true" 설정이 필요 없지만, 파일 드래그 앤 드롭은 지원하지 않습니다).

사. 데이터 전송

데이터 전송에는 event.dataTransfer 객체를 사용하며, 이 객체는 setData(type, data); 와 getData(type); 메서드를 제공하여 데이터를 저장하고 가져옵니다.

그리고 dragstart 이벤트 핸들러에서setData('text/plain', data)(IE10 은 text/plain 만 지원), drop 이벤트 핸들러에서 getData('text') 합니다

주의: 타입이 존재하지 않으면 data 리스트 끝에 추가되고, 이미 존재하면 기존 내용을 대체합니다. 따라서 IE10 을 고려하지 않으면 setData(key, value); 와 동일합니다

오. 파일 드래그 앤 드롭

dropArea.ondragover = function(e) {
    e.preventDefault();
}
dropArea.ondrop = function(e) {
    e.preventDefault();
    
    var files = e.dataTransfer.files;
    if (files && files.length > 0) {
        // 파일 정보 출력
        var str = '';
        for(var i = 0; i < files.length; i++) {
            var file = files[i];

            // 이미지 온라인 미리보기도 먼저 이미지를 서버에 업로드해야 합니다. 클라이언트 파일 URL 을 얻을 수 없기 때문입니다

            // 파일 업로드는 file 객체를 xhr 로 보내기만 하면 됩니다
            // var formData = new FormData();
            // formData.append('myfile', file);
            // xhr.send(formData);
            console.log(file);
        }

        console.log('receive a file');
    }
}

파일 드래그 앤 드롭 업로드에서는 주의할 점이 많으며, 다음 블로그 게시물에서 몇 가지 일반적인 구현 방법을 자세히 소개할 예정입니다

참고 자료

HTML5 마법당: Drag & Drop API 완전 이해: 매우 포괄적
JS 마법당: IE5~9 의 Drag&Drop API: [IE10-] 가 지원하는 드래그 앤 드롭
HTML5 drag & drop 드래그 앤 드롭简介