Drag and Drop API를 사용하여 사용자를 위한 대화식 환경을 만드는 방법 알아보기

드래그 앤 드롭 API를 사용하면 페이지에서 어떤 요소를 드래그 할 수 있는지 정의하고 사용자가 요소를 드래그 할 때 가로 챌 수 있습니다.

최신 브라우저에서 매우 잘 지원됩니다.

https://flaviocopes.com/drag-and-drop/ 

API 공부를 시작하기 전에 페이지에서 어떤 요소를 드래그 할 수 있는지 정의하는 방법을 알아야 합니다. 페이지 HTML에 draggable 속성을 true 값으로 추가하면 됩니다.

<div draggable="true">
  ...
</div>

이것은 요소를 드래그 할 수 있게 하기에 충분합니다.

팁 : 이미지, 텍스트 선택 및 링크는 기본적으로 draggable을 false로 설정하지 않는 한 드래그 가능합니다. 

브라우저 내에서 사용자 컴퓨터의 파일을 드래그 할 수도 있습니다. 이 경우 파일을 전송합니다.

요소를 어디로 드래그 할 수 있는지는 명확히 해야 할 또 다른 포인트입니다. 요소를 드래그 할 수 있을 뿐 아니라 요소에 드롭 할 수도 없습니다. 요소는 유효한 drop target이어야 합니다.

요소를 놓기 대상으로 만들려면 dragover 이벤트를 수신하고 false를 반환하거나 전달 된 이벤트에서 preventDefault()를 호출합니다.

const element = document.querySelector('#my-drop-target)
element.addEventListener('dragover', event => {
  event.preventDefault()
})

그렇게 하면 드래그 가능한 요소와 놓기 대상이 생겨 시작할 수 있습니다. 드래그 가능한 요소에서 상호 작용할 수 있는 이벤트는 다음과 같습니다.

• dragstart
• drag
• dragend

놓기 대상에서 :

• dragenter
• dragover
• dragleave
• drop

드래그 앤 드롭 작업 및 발생한 이벤트 개요 

사용자가 드래그 가능한 요소 드래그를 시작하거나 마우스로 클릭하고 마우스를 움직이거나 탭을 누른 채로 선택을 이동하면 dragstart 이벤트가 발생합니다.

element.addEventListener('dragstart', event => {
  //...
})

이벤트 처리 함수에 매개 변수로 전달 된 event 객체는 DragEvent 객체입니다.

마우스, 키보드, 스크롤 등 다른 모든 이벤트와 공유되는 보다 일반적인 Event 객체에서 확장됩니다.

이 시점에서 요소가 드래그되고 드래그 이벤트가 시작됩니다. 항목을 드래그 할 때 여러 번, 스크롤 또는 마우스 오버 이벤트와 같은 조절을 사용해야 합니다.

drop target을 입력하자마자 :

• dragenter event가 drop target에서 시작됩니다.
• dragover event가 drop target에서 시작됩니다.

드래그 한 요소가 먼저 놓기 대상으로 들어간 다음 멀리 떨어지면 놓기 대상에서 dragleave 이벤트가 시작됩니다.

사용자가 마우스를 놓으면 드래그중인 요소에서 dragend 이벤트가 시작되고 놓기 대상에서 drop 이벤트가 시작됩니다.

Dragging data : DataTransfer 

드래그 앤 드롭과 관련된 모든 이벤트는 앞서 언급 한 바와 같이 DragEvent 객체이며 드래그 되는 데이터를 보유하고 5 개의 속성을 제공하는 dataTransfer라는 속성이 있습니다.

• dropEffect
• effectAllowed
• files
• items (read only)
• types (read only)

드래그 이벤트가 시작되면 몇 가지 작업을 수행 할 수 있습니다.

Set / get the effect 

dragstart 이벤트에서 effectAllowed 속성을 설정하여 드래그 작업의 원하는 효과를 설정할 수 있습니다. 놓기 대상이 놓인 요소를 처리하는 방법을 설정하는 몇 가지 옵션이 있습니다.

• none : 떨어 뜨리면 안됩니다
• move : 움직일 수 있습니다
• copy : 복사 할 수 있습니다
• link : 그것은 연결될 수 있습니다
• copyMove : 복사하거나 이동할 수 있습니다
• copyLink : 복사하거나 연결할 수 있습니다
• linkMove : 이동하거나 연결할 수 있습니다
• all : 복사, 이동 또는 링크 가능

(모두 문자열입니다).

기본값은 all입니다.

dropEffect 속성은 드래그 앤 드롭 작업의 유형을 가져 오는 데 사용되며, 이번에는 수정 자 키를 사용하여 사용자가 설정합니다. 예를 들어, Mac에서 Alt 키를 누르면 놓기 대상이 항목을 이동하는 대신 복사하도록 설정됩니다.

이 속성은 읽기 전용이 아닙니다. dragenter 또는 dragover 이벤트에서 다음 문자열 값 중 하나로 편집 할 수 있습니다.

• none : 떨어 뜨리면 안됩니다
• move : 움직일 수 있습니다
• copy : 복사 할 수 있습니다
• link : 그것은 연결될 수 있습니다

예:

element.addEventListener('dragenter', event => {
  event.dataTrasfer.dropEffect = 'move'
})

전송되는 데이터 

루프를 사용하여 반복하고 각 DataTransferItem 객체에 액세스 할 수 있는 배열과 유사한 객체 인 dataTransfer.items 속성에서 전송 중인 항목에 액세스 할 수 있습니다.

DataTransferItem에는 두 가지 읽기 전용 속성이 있습니다.

• kind : 드래그 되는 항목의 종류 파일 또는 문자열을 포함하는 문자열을 반환
• type : 아이템의 MIME 타입

그리고 두 가지 방법이 있습니다.

• getAsFile() : 드래그 되는 데이터를 나타내는 File 객체를 반환합니다
• getAsString() : 드래그 되는 데이터를 나타내는 문자열 객체를 pasing 콜백 함수를 실행합니다.

그들은 비슷한 이름을 가지고 있지만 매우 다르게 작동합니다. 첫 번째는 File 객체를 반환합니다.

element.addEventListener('dragenter', event => {
  for (item of event.dataTrasfer.items) {
    const theFile = item.getAsFile()
  }
})

두 번째는 항목을 문자열로 콜백 함수에 전달합니다.

element.addEventListener('dragenter', event => {
  for (item of event.dataTrasfer.items) {
    item.getAsString(theString => {
      console.log(theString)
    })
  }
})

드래그 되는 항목 파일의 유형은 dataTransfer 객체의 types 속성에 저장됩니다. 기본적으로 문자열 문자열을 포함하는 배열입니다. 파일을 드래그 하는 경우 해당 유형은 문자열 값인 파일입니다.

dataTransfer.items에 나열되는 것 외에도 전송 중인 파일이 있으면 dataTransfer의 files 속성에 저장됩니다.

이 속성은 드래그 할 파일을 나열하는 FileList 객체를 가리킵니다.

Codepen에서이 데모를 확인하십시오.

https://codepen.io/flaviocopes/pen/JqXZoB