Drag and drop

지니씨·2023년 12월 14일

DND JavaScript brower event drag and drop iframe

프론트엔드

목록 보기

83/84

Browser Event

이벤트 리스너

element.addEventListener(event, handler, [options]);
options
- once: true: 이벤트가 트리거 될 때 리서트가 자동으로 삭제됨, 기본값 false
- capture: 어느 단계에서 이벤트를 다뤄야 하는지를 알려주는 프로퍼티, options을 객체가 아닌 false/true로 할당 시 {capture: false/true}와 동일, 기본값 false
- passive: true: 리스너에서 지정한 함수가 preventDefault()를 호출하지 않음, 기본값 false

캡처링, 타깃, 버블링

https://ko.javascript.info/bubbling-and-capturing
DOM 이벤트에서 정의한 이벤트 흐름엔3가지 단계(캡처링, 타깃, 버블링) 존재
버블링과 캡처링은 '이벤트 위임(event delegation)'의 토대가 됨
event.target: 이벤트가 발생한 가장 안쪽의 요소
event.currentTarget(=this): 이벤트를 핸들링하는 현재 요소 (핸들러가 실제 할당된 요소)
event.eventPhase: 현재 이벤트 흐름 단계(캡처링=1, 타깃=2, 버블링=3)
캡처링
- 이벤트가 하위 요소로 전파되는 단계
버블링
- 이벤트가 상위 요소로 전파되는 단계
- 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러 동작, 가장 최상단의 조상 요소를 만날 때까지 이 과정 반복되면서 요소 각각에 할당된 핸들러 동작
- event.stopPropagation(): 버블링 방지, 아키텍처를 잘 고려해 꼭 막아야 하는 상황에서만 버블링 막기, 추후에 문제가 될 수 있는 상황을 만들어 낼 수 있음

드래그 앤 드롭

HTML draggable : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/draggable
- 열거형 특성으로 true 또는 false 지정 필수
dragstart
- 드래깅을 시작했을때 드래깅되는 요소에서 발생하는 이벤트
dragenter
- 유효한 드랍 타겟 위에 요소가 진입할 때 drop 타겟에서 발생하는 이벤트
dragover
- 유효한 드랍 타겟 위에서 요소가 드래깅될 때 drop 타겟에서 발생하는 이벤트
drag
drop
- 유효한 드랍 타겟 위에 요소가 드랍될 때 drop 타겟에서 발생하는 이벤트
dragleave
- 유효한 드랍 타겟 위에 요소가 진입할 때 drop 타겟에서 발생하는 이벤트
dragend
- 드래깅이 끝났을 때 드래깅되는 요소에서 발생하는 이벤트

dataTransfer

https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface
드래그앤드랍 이벤트를 위한 모든 이벤트 리스너 메소드는 DataTransfer 객체 반환
드래그앤드랍 동작에 관한 정보 가지고 있는 객체
dataTransfer.setDragImage()
- mdn
- 일반적으로 <img>, <canvas> 나 다른 시각적인 요소로 대체 가능
- dragstart 이벤트 핸들러 안에서 호출 가능
- 드래그 동작 중 마우스 포인터를 따라다니는 레이어 커스텀 가능 but 투명도 조절은 불가능 (참고)
- Parameters > imgElement
  : Element가 img 요소인 경우 드래그 데이터 저장소 비트맵을 요소의 이미지(본래 크기)로 설정합니다. 그렇지 않으면 드래그 데이터 저장소 비트맵을 지정된 요소에서 생성된 이미지로 설정합니다(정확한 메커니즘은 현재 지정되지 않았습니다). Element가 기존 HTMLElement 요소인 경우 드래그 피드백 이미지로 표시하려면 뷰포트에 표시되어야 합니다. 또는 대안으로 화면 밖에 있을 수 있는 새 DOM 요소를 만들 수 있습니다.
- Parameters > xOffset
- Parameters > yOffset

HTML 스펙

6.11.1 Introduction
- 요소를 드래그 가능하게 만들려면 요소에 draggable 속성을 부여하고 드래그되는 데이터를 저장하는 dragstart에 대한 이벤트 수신기 설정
- 이벤트 핸들러는 텍스트 드래그 선택이 아닌지 확인한 다음 DataTransfer 개체에 데이터를 저장하고 허용되는 효과(복사, 이동, 링크, 일부 조합)를 설정해야 함
- 드롭을 수락하려면 드롭 대상이 다음 이벤트를 수신해야 함
  : dragenter
  : dragover
  : drop
- 원래 요소(드래그된 요소)를 화면에서 제거하려면 dragend이벤트 사용
6.11.2 The drag data store
- 드래그 데이터 항목의 종류로 text, file 이 있음.
6.11.3 The DataTransfer interface
- DataTransfer 개체는 드래그 앤 드롭 작업의 기본이 되는 드래그 데이터 저장소를 노출하는 데 사용
- event.dataTransfer의 속성들의 기본값은 브라우저에 따라 다를 수 있다. 브라우저 및 사용 중인 플랫폼에 따라 다르기 때문에 정확한 값을 확인하려면 브라우저의 문서 참고. 일반적으로는 dropEffect: 'move', effectAllowed: 'uninitialized', ,,,
6.11.6 Events summary
6.11.7 The draggable attribute
6.11.8 Security risks in the drag-and-drop model
- 드래그 시작 이벤트부터 드롭 이벤트가 발생하기 전까지는 DataTransfer 개체에 추가된 데이터를 스크립트에서 사용할 수 없도록 해야 함
- 사용자가 특정하게 드래그 작업을 종료한 경우에만 드롭이 성공한 것으로 간주해야 함
- 스크립트가 드래그 작업을 종료하면 성공하지 못한 것으로 간주하여 드롭이벤트를 실행하지 않아야 함
- 스크립트 작업에 대한 응답으로 드래그 앤 드롭 작업을 시작하지 않도록 주의해야 함