HTML5 드래그 앤 드롭 API 사용

HTML5 드래그 앤 드롭 (DnD) API는 페이지의 거의 모든 요소를 드래그 가능하게 만들 수 있음을 의미합니다.이 게시물에서는 드래그의 기본 사항을 설명합니다.

드래그 가능한 콘텐츠 만들기 #

대부분의 브라우저에서 텍스트 선택, 이미지 및 링크는 기본적으로 드래그 할 수 있습니다. 예를 들어, Google 검색에 Google 로고가 표시되면 고스트 이미지가 표시되고 이미지를 주소 표시 줄, <input type="file" /> 요소 또는 데스크톱에 드롭 할 수 있습니다. 다른 유형의 콘텐츠를 드래그 할 수 있도록하려면 HTML5 DnD API를 사용해야합니다.

객체를 드래그 할 수 있도록 설정하려면 해당 요소에 draggable=true. 거의 모든 항목을 드래그 할 수 있습니다. 이미지, 파일 , 링크, 파일 또는 페이지의 모든 마크 업.

이 예에서는 CSS Grid로 배치 된 일부 열을 재정렬하는 인터페이스를 만듭니다. 열의 기본 마크 업은 다음과 같습니다. 이것은 각 열에

속성이 true로 설정되었습니다.

다음은 내 컨테이너 및 상자 요소에 대한 CSS입니다. 유일한 CSS DnD 기능과 관련된 것은 cursor: move 속성입니다. 나머지 코드는 컨테이너 및 상자 요소의 레이아웃과 스타일을 제어합니다.

이 시점에서 항목을 드래그 할 수 있지만 다른 작업은 발생하지 않습니다. DnD 기능을 추가하려면 JavaScript API를 사용해야합니다.

드래그 이벤트 수신 #

여러 가지가 있습니다. 전체 드래그 앤 드롭 프로세스를 모니터링하기 위해 첨부 할 다양한 이벤트가 있습니다.

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

DnD 흐름을 처리하려면 일종의 소스 요소 (드래그가 시작되는 위치)가 필요합니다. yload (드롭하려는 대상) 및 대상 (드롭을 잡을 영역). 소스 요소는 이미지, 목록, 링크, 파일 개체, HTML 블록 등이 될 수 있습니다. 대상은 드롭 영역입니다. 사용자가 놓으려고하는 데이터를 받아들이는 (또는 놓기 영역 집합) 모든 요소가 대상이 될 수있는 것은 아닙니다. 예를 들어 이미지는 대상이 될 수 없습니다.

시작 및 종료 드래그 앤 드롭 시퀀스 #

콘텐츠에 draggable="true" 속성이 정의되면 dragstart 이벤트 핸들러를 첨부합니다. 각 열의 DnD 시퀀스를 시작합니다.

이 코드는 사용자가 드래그를 시작할 때 열의 불투명도를 40 %로 설정하고 드래그 이벤트가 끝나면 100 %로 되돌립니다.

결과는 아래의 Glitch 데모에서 볼 수 있습니다. 항목을 드래그하면 불투명 해집니다. dragstart 이벤트의 대상이 소스 요소이므로 this.style.opacity를 40 %로 설정하면 사용자가 요소가 이동중인 현재 선택이라는 시각적 피드백입니다. 항목을 놓으면 놓기 기능이 제자리에 있지 않지만 소스 요소가 100 % 불투명도로 돌아갑니다.

dragenter, dragover 및 dragleave를 사용하여 시각적 단서를 추가합니다. #

사용자가 인터페이스와 상호 작용하는 방법을 이해하는 데 도움이되도록 dragenter, dragover 및 dragleave 이벤트 핸들러.이 예에서 열은 드래그 할 수있을뿐만 아니라 놓기 대상입니다. 열 위에 드래그 된 항목을 담을 때 테두리를 점선으로 만들어 이해하려면 예를 들어 CSS에서 over 클래스를 만들어 놓기 대상인 요소를 나타낼 수 있습니다. / p>

그런 다음 J avaScript는 이벤트 핸들러를 설정하고 열을 드래그 할 때 over 클래스를 추가하고 떠날 때 제거합니다. dragend 또한 드래그가 끝날 때 클래스를 제거해야합니다.

이 코드에서 다룰 가치가있는 몇 가지 사항이 있습니다. :

링크와 같은 것을 드래그하는 경우 해당 링크로 이동하는 브라우저의 기본 동작을 방지해야합니다. 이렇게하려면 dragover 이벤트. 또 다른 좋은 방법은 동일한 핸들러에서 false를 반환하는 것입니다.
dragenter 이벤트 핸들러는 dragover 대신 over 클래스를 전환하는 데 사용됩니다. . dragover를 사용하는 경우 dragover 이벤트가 열을 가리키면 계속 발생하므로 CSS 클래스가 여러 번 토글됩니다. 그 원인이 브라우저의 렌더러는 많은 양의 불필요한 작업을 수행합니다. 다시 그리기를 최소한으로 유지하는 것은 항상 좋은 생각입니다.무언가에 dragover 이벤트를 사용해야하는 경우 이벤트 리스너를 조절하거나 디 바운싱하는 것을 고려하세요.

드롭 # 완료

실제 드롭을 처리하려면 drop 이벤트에 대한 이벤트 리스너를 추가합니다. drop 핸들러에서 다음을 방지해야합니다. 일반적으로 일종의 성가신 리디렉션 인 드롭에 대한 브라우저의 기본 동작입니다. e.stopPropagation()를 호출하여 이벤트가 DOM을 버블 링하는 것을 방지 할 수 있습니다.

이 시점에서 코드를 실행하면 항목이 새 위치로 떨어지지 않습니다.이를 위해서는 DataTransfer object.

dataTransfer 속성은 모든 DnD 마법이 발생하는 곳이며 드래그 작업으로 전송 된 데이터 조각을 보유합니다. dataTransfer는 dragstart 이벤트에서 설정되고 드롭 이벤트에서 읽기 / 처리됩니다. e.dataTransfer.setData(mimeType, dataPayload)를 호출하면 개체를 설정할 수 있습니다. “s MIME 유형 및 데이터 페이로드.

이 예에서는 사용자가 열의 순서를 재정렬 할 수 있도록합니다. 이렇게하려면 먼저 드래그 할 때 소스 요소의 HTML을 저장해야합니다. 시작 :

처리하는 drop 이벤트에서 열 드롭, 소스 열의 HTML을 드롭 한 대상 열의 HTML로 설정하고, 먼저 사용자가 드래그 한 동일한 열로 다시 떨어지지 않는지 확인합니다.

다음을 볼 수 있습니다. 다음 데모의 결과입니다. B 열 위에있는 A 열을 끌어 놓은 다음 위치가 어떻게 바뀌는 지 확인합니다.

자세히 드래그 속성 #

dataTransfer 개체는 드래그 프로세스 중에 사용자에게 시각적 피드백을 제공하는 속성을 노출합니다. 이러한 속성은 각 드롭 대상을 제어하는데도 사용할 수 있습니다. 특정 데이터 유형에 응답합니다.

dataTransfer.effectAllowed 제한 ts 사용자가 요소에서 수행 할 수있는 “드래그 유형”은 iv id = “341301d4b8 동안 dropEffect를 초기화하기 위해 끌어서 놓기 처리 모델에서 사용됩니다. “>

및 dragover 이벤트. 속성은 다음 값으로 설정할 수 있습니다. none, copy, copyLink, copyMove, link, linkMove, move, all 및 uninitialized.

dataTransfer.dropEffect는 dragenter 및 dragover 이벤트. 사용자가 대상 요소 위로 마우스를 가져 가면 브라우저의 커서가 어떤 유형의 작업이 수행 될 것인지 표시합니다 (예 : 복사, 이동 등) 효과는 none, copy, link, move.

e.dataTransfer.setDragImage(imgElement, x, y)는 브라우저를 사용하는 대신 의미합니다. ” s 기본 “고스트 이미지”피드백, 선택적으로 드래그 아이콘을 설정할 수 있습니다.

# 드래그 앤 드롭으로 파일 업로드

이 간단한 예에서는 열을 드래그 소스 및 드래그 대상. 사용자가 항목을 재정렬하도록 요청하는 UI에서 볼 수 있습니다. 사용자가 하나의 이미지를 선택해야하는 인터페이스와 같이 일부 상황에서는 드래그 대상과 소스가 다를 수 있습니다. 선택한 이미지를 대상으로 드래그하여 제품의 기본 이미지입니다.

드래그 앤 드롭은 사용자가 데스크톱에서 애플리케이션으로 항목을 드래그 할 수 있도록하는 데 자주 사용됩니다. 주요 차이점은 drop 핸들러. dataTransfer.getData()를 사용하여 파일에 액세스하는 대신 해당 데이터를 dataTransfer.files 속성에 포함됩니다.

사용자 정의 드래그 앤 드롭에서 이에 대한 자세한 정보를 찾을 수 있습니다.