HTML5 드래그 앤 드롭(DnD) API 덕분에 페이지 내 거의 모든 요소가 드래그 가능해집니다. 이 글에서는 드래그 앤 드롭의 기본을 다루겠습니다.
드래그 가능한 콘텐츠 만들기
대부분의 브라우저에서는 텍스트 선택, 이미지, 링크가 기본적으로 드래그 가능하다는 점도 주목할 만합니다. 예를 들어, 구글 검색에서 구글 로고를 드래그하면 유령 이미지가 보입니다. 그 이미지를 주소창, <입력 유형="file" /> 요소, 또는 데스크톱에 드래그 앤 드롭할 수 있습니다. 다른 유형의 콘텐츠를 드래그 가능하게 하려면 HTML5 DnD API를 사용해야 합니다.
객체를 드래그 가능하게 만들려면 요소를 설정하세요드래그 가능=참。 드래그는 이미지, 파일, 링크, 파일 또는 페이지상의 마크업 등 거의 모든 요소에 대해 지원할 수 있습니다.
예시에서는 CSS Grid로 배치된 일부 열을 재배열하는 인터페이스를 만들 것입니다. 이 열들의 기본 마크업은 아래에 나와 있으며, 각 열에 대해 드래그 가능한 속성이 true로 설정되어 있습니다.
여기 제 컨테이너와 박스 요소의 CSS가 있습니다. DnD 기능과 관련된 유일한 CSS는 cursor: move 속성입니다. 나머지 코드는 컨테이너와 박스 요소의 레이아웃과 스타일만 제어합니다.
이 시점에서 아이템을 드래그할 수는 있지만 다른 일은 일어나지 않습니다. DnD 기능을 추가하려면 JavaScript API를 사용해야 합니다.
드래그 이벤트 소식 듣기
드래그 앤 드롭 전체 과정을 모니터링하기 위해 다양한 이벤트를 연결할 수 있습니다.
- 드래그스타트
- 드래그
- 드라젠터
- 드래그리브
- 드래그오버
- 방울
- 드래그젠드
DnD 스트림을 처리하려면 소스 요소(드래그의 시작점), 데이터 페이로드(배치하려는 것), 그리고 타겟(스냅 위치가 있는 영역)이 필요합니다. 소스 요소는 이미지, 리스트, 링크, 파일 객체, HTML 블록 등이 될 수 있습니다. 목표는 사용자가 배치하려는 데이터의 드롭존(또는 드롭존 집합)을 수락하는 것입니다. 모든 요소가 목표가 될 수 있는 것은 아니라는 점을 기억하세요. 예를 들어, 이미지는 목표가 될 수 없습니다.
드래그 앤 드롭 시퀀스를 시작하고 종료하세요
콘텐츠에 드래그 가능한 ="true" 속성을 정의한 후, 각 열에 대해 DnD 시퀀스를 시작하는 드래그스타트 이벤트 핸들러를 첨부합니다.
이 코드는 사용자가 드래그를 시작할 때 열의 불투명도를 40%로 설정하고, 드래그 이벤트가 끝나면 100%로 되돌립니다.
그 결과는 아래 글리치 데모에서 확인할 수 있습니다. 아이템을 드래그하면 불투명해집니다. 드래그스타트 이벤트가 소스 요소를 대상으로 하기 때문에, this.style.opacity를 40%로 설정하면 현재 선택된 요소가 움직이고 있다는 시각적 피드백을 제공합니다. 아이템이 배치된 후 소스 요소는 100% 불투명도로 되돌아가지만, 배치 함수는 아직 작성되지 않았습니다.
Dragenter, Dragover, 드래그리브를 사용해 추가 시각적 단서를 추가하세요
사용자가 인터페이스와 어떻게 상호작용하는지 이해할 수 있도록 dragenter, dragover, dragleave 이벤트 핸들러를 사용하세요. 다음 예시에서는 열을 드래그하거나 타겟팅할 수 있습니다. 사용자가 이해하기 쉽게 하기 위해, 항목을 열을 지나가면 해당 열의 경계선이 점선으로 표시됩니다. 예를 들어, CSS에서 배치 대상인 요소를 표현하는 오버클래스를 만들 수 있습니다:
그 다음, 자바스크립트에서 이벤트 핸들러를 설정해 열을 지나갈 때 오버클래스를 추가하고 나갈 때 제거하세요. 드래그 핸들러에서는 드래그가 끝날 때 클래스가 제거되도록 하고자 합니다.
이 코드에서 언급할 몇 가지 사항이 있습니다:
링크와 같은 요소를 드래그할 때는 브라우저의 기본 동작인 해당 링크로 이동하는 것을 차단해야 합니다. 이를 위해 드래그오버 이벤트에서 e.preventDefault()를 호출하세요. 또 다른 좋은 방법은 같은 핸들러에서 false를 반환하는 것입니다.
클래스를 전환할 때는 dragenter 이벤트 핸들러를 사용하세요, 드래그오버가 아닙니다. 드래그오버를 사용하면 이벤트 드래그오버가 열이 떠 있을 때 계속 트리거되기 때문에 CSS 클래스가 여러 번 토글됩니다. 결국 이로 인해 브라우저의 렌더러가 불필요한 작업을 많이 하게 될 것입니다. 항상 최소한으로 계속 다시 그리는 게 가장 좋아요. 만약 어떤 이유로 드래그오버 이벤트를 사용해야 한다면, 이벤트 리스너를 제한하거나 제거하는 것을 고려하세요.
배치 완료
실제 배치를 처리하려면 드롭 이벤트에 이벤트 리스너를 추가하세요. 드롭 핸들러에서는 브라우저의 기본 배치 동작을 차단해야 하는데, 보통 성가신 리디렉션이 됩니다. e.stopPropagation()을 호출하여 이벤트가 DOM을 트리거하는 것을 방지할 수 있습니다.
새 핸들러를 다른 핸들러에 등록하세요:
이 시점에 코드를 실행하면 프로젝트가 새로운 위치에 배치되지 않습니다. 이를 위해서는 DataTransfer 객체를 사용해야 합니다.
dataTransfer 속성은 모든 DnD 불가사의가 일어나는 곳입니다. 드래그 작업으로 전송된 데이터 조각을 저장합니다. dataTransfer는 드래그스타트 이벤트에서 설정되어 있고 드롭 이벤트에서 읽기/처리됩니다. e.dataTransfer.setData(mimeType, dataPayload)를 호출하여 객체의 MIME 타입과 데이터 페이로드를 설정하세요.
다음 예시에서는 사용자가 열의 순서를 재배열할 수 있도록 합니다. 이를 위해서는 먼저 드래그 시작 부분에 소스 요소의 HTML을 저장해야 합니다:
drop 이벤트에서 열 배치를 처리하고, 소스 열의 HTML을 해당 열이 배치된 대상 열의 HTML로 설정하세요. 먼저 사용자가 드래그 앤 드롭한 대상 열이 소스 열과 동일한지 확인하세요.
더 많은 항력 특성
dataTransfer 객체는 드래그 과정에서 사용자에게 시각적 피드백을 제공하는 데 사용되는 속성을 노출합니다. 이 속성들은 각 배치 대상이 특정 데이터 유형에 어떻게 반응하는지를 제어하는 데에도 사용할 수 있습니다.
- dataTransfer.effectAllowed는 사용자가 요소에 수행할 수 있는 "드래그 유형"을 제한합니다. 드래그 앤 드롭 처리 모델에서 드라젠터와 드래그오버 이벤트 중에 dropEffect를 초기화하는 데 사용됩니다. 이 속성은 다음과 같은 값으로 설정할 수 있습니다: none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized.
- dataTransfer.dropEffect는 Dragenter 및 Dragover 이벤트 중 사용자에게 제공되는 피드백을 제어합니다. 사용자가 대상 요소 위에 마우스를 올리면 브라우저의 커서가 수행할 동작 유형(예: 복사, 이동 등)을 표시합니다. 효과는 다음 값 중 하나일 수 있습니다: 없음, 복사, 링크, 이동.
- e.dataTransfer.setDragImage(imgElement, x, y)는 브라우저의 기본 "고스트 이미지" 피드백이 사용되지 않으며, 대신 드래그 아이콘을 설정할 수 있는 옵션이 있음을 나타냅니다.
드래그 앤 드롭으로 파일 업로드
다음 간단한 예시는 열을 드래그 소스와 드래그 타겟으로 사용합니다. UI에서 아이템을 재배치하라는 요청을 받을 때 이를 확인할 수 있습니다. 경우에 따라 타겟을 드래그하고 소스를 드래그하는 방식이 다를 수 있는데, 예를 들어 사용자가 선택한 이미지를 타겟에 드래그하여 제품의 메인 이미지로 이미지를 선택해야 하는 인터페이스가 그렇습니다.
드래그 앤 드롭은 사용자가 데스크톱에서 앱으로 항목을 드래그할 수 있도록 자주 사용됩니다. 가장 큰 차이점은 드롭 핸들러입니다. dataTransfer.getData()를 사용하지 않아도 파일에 접근하면, 파일의 데이터는 dataTransfer.files 속성에 포함됩니다:
원본 링크:하이퍼링크 로그인이 보입니다.
|
2022-4-26 10:30:50에 게시됨
|
|
|
|
2022-4-26 21:27:25에 게시됨
|
