소개
드래그 앤 드롭은 많은 그래픽 사용자 인터페이스에서 찾을 수있는 일반적인 사용자 상호 작용입니다.
앱에 드래그 앤 드롭 기능을 추가하기위한 기존 JavaScript 라이브러리가 있습니다. 그러나 라이브러리를 사용할 수 없거나 프로젝트에 필요하지 않은 오버 헤드 또는 종속성이 발생하는 상황이있을 수 있습니다. 이러한 상황에서 최신 웹 브라우저에서 사용할 수있는 API에 대한 지식은 대체 솔루션을 제공 할 수 있습니다.
HTML Drag and Drop API는 DOM의 이벤트 모델을 사용하여 끌어서 놓는 항목에 대한 정보를 얻습니다. 끌어서 놓을 때 해당 요소를 업데이트합니다. JavaScript 이벤트 핸들러를 사용하면 모든 요소를 드래그 가능한 항목 또는 드롭 할 수있는 항목으로 바꿀 수 있습니다.
이 자습서에서는 HTML 드래그 앤 드롭을 사용하여 드래그 앤 드롭 예제를 빌드합니다. 이벤트 핸들러를 사용하기위한 바닐라 자바 스크립트가 포함 된 API.
전제 조건
이 자습서를 완료하려면 다음이 필요합니다.
- 다음을 지원하는 최신 웹 브라우저 드래그 앤 드롭 API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18 +)
1 단계 — 프로젝트 및 초기 마크 업 만들기
프로젝트는 두 가지 유형의 하위 요소가있는 컨테이너로 구성됩니다.
- 끌 수있는 하위 요소
- 요소를 드롭 할 수있는 하위 요소
먼저 터미널 창을 열고 새 프로젝트 디렉토리를 만듭니다.
다음으로 해당 디렉토리로 이동합니다.
그런 다음 해당 디렉토리에 index.html 파일을 만듭니다.
다음으로 HTML 웹 페이지에 대한 상용구 코드를 추가합니다.
그리고 <body> 태그는 draggable 항목과 dropzone (드롭 대상)을 추가합니다.
파일을 저장하고 닫습니다. 그런 다음 style.css 파일을 만듭니다.
다음으로 index.html 파일 :
앱에 일부 서식을 추가합니다. 이제 브라우저에서 index.html를보고 draggable <div> 및 a dropzone <div>.
다음으로 draggable 속성을 추가하여 첫 번째 <div>를 드래그 할 수 있도록 명시 적으로 만들 것입니다.
파일을 저장하고 닫습니다.
마지막으로 브라우저에서 index.html를 다시 봅니다. draggable <div>를 클릭하고 화면에서 드래그하면 움직이는 것을 시각적으로 표시해야합니다.
draggable 속성의 기본값은 auto입니다. 즉, 요소를 드래그 할 수 있는지 여부는 브라우저의 기본 동작에 따라 결정됩니다. 일반적으로 이것은 draggable="true"를 지정하지 않고도 텍스트 선택, 이미지 및 링크를 드래그 할 수 있음을 의미합니다.
이제 드래그 가능한 요소가있는 HTML 파일이 있습니다. onevent 핸들러 추가로 넘어갈 것입니다.
2 단계 — 자바 스크립트로 드래그 앤 드롭 이벤트 처리
현재 드래그 가능한 요소를 드래그하는 동안 마우스를 놓아도 아무 일도 일어나지 않습니다. DOM 요소에서 끌어서 놓기 작업을 트리거하려면 Drag and Drop API를 활용해야합니다.
-
ondragstart:이 이벤트 핸들러draggable요소에 첨부되고dragstart이벤트가 발생하면 실행됩니다. -
ondragover:이 이벤트 핸들러는dropzone요소에 연결되며dragover이벤트가 발생할 때 실행됩니다. -
ondrop:이 이벤트 핸들러는dropzone요소에도 연결되며drop이벤트가 발생합니다.
참고 : 총 8 개의 이벤트 핸들러가 있습니다. ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart 및 ondrop. 이 예에서는 모두 필요하지 않습니다.
먼저 index.html 파일을 참조하겠습니다. :
다음으로 새 https://www.digitalocean.com/community/tutorials/script.js 파일 :
DataTransfer 개체는 현재 진행중인 드래그와 관련된 정보를 추적합니다. 드래그 앤 드롭시 요소를 업데이트하려면 DataTransfer 개체에 직접 액세스해야합니다.이를 위해 DOM 요소의 DragEvent에서 dataTransfer 속성을 선택할 수 있습니다.
참고 : DataTransfer 개체는 동시에 드래그되는 여러 요소에 대한 정보를 기술적으로 추적 할 수 있습니다. 이 예에서는 하나의 요소를 드래그하는 데 중점을 둡니다.
dataTransfer 개체의 setData 메서드 현재 드래그 된 요소에 대한 드래그 상태 정보를 설정하는 데 사용할 수 있습니다. 두 가지 매개 변수가 필요합니다.
- 두 번째 매개 변수의 형식을 선언하는 문자열
- 전송되는 실제 데이터
목표 draggable 요소를 새 상위 요소로 이동하는 것입니다. 고유 한 id가있는 draggable 요소를 선택할 수 있어야합니다. 드래그 한 요소의 id를 setData 메서드로 설정하여 나중에 사용할 수 있습니다.
하자 https://www.digitalocean.com/community/tutorials/script.js 파일을 다시 방문하여 setData를 사용할 새 함수를 만듭니다.
참고 : Internet Explorer 9에서 11까지는 "text/plain" 사용에 문제가있는 것으로 알려졌습니다. 형식은 해당 브라우저의 "text" 여야합니다.
드래그 된 항목의 CSS 스타일을 업데이트하려면 DOM 이벤트를 사용하여 해당 스타일에 액세스 할 수 있습니다. currentTarget에 대해 원하는 스타일을 설정합니다.
함수에 추가하고 backgroundColor를
:
참고 : 변경 한 모든 스타일은 수동으로 다시 업데이트해야합니다. 드래그 전용 스타일을 원한다면 드롭에. 드래그를 시작할 때 변경하면 드래그 한 요소는 다시 변경하지 않는 한 새 스타일을 유지합니다.
이제 드래그가 시작될 때 JavaScript 기능이 있습니다.
index.html의 draggable 요소에 ondragstart를 추가 할 수 있습니다.
브라우저에서
index.html를 봅니다. 지금 항목을 드래그하면 함수에 선언 된 스타일이 적용됩니다.
하지만 아무 일도 일어나지 않습니다. 클릭을 놓을 때.
이 시퀀스에서 실행되는 다음 이벤트 핸들러는 ondragover입니다.
특정 DOM 요소의 기본 드롭 동작 브라우저의 <div>처럼 일반적으로 드롭을 허용하지 않습니다. 이 동작은 우리가 구현하려는 동작을 가로 챌 것입니다. 원하는 드롭 동작을 얻기 위해 preventDefault를 적용합니다.
https://www.digitalocean.com/community/tutorials/script.js 파일을 다시 방문하여 preventDefault를 사용할 새 함수를 만듭니다. 다음 코드를 파일 끝에 추가합니다.
이제 index.html의 dropzone 요소에 ondragover를 추가 할 수 있습니다.
이 시점에서 우리는 실제 드롭을 처리하는 코드를 아직 작성하지 않았습니다. 이 시퀀스에서 실행되는 최종 이벤트 핸들러는 ondrop입니다.
https://www.digitalocean.com/community/tutorials/script.js 파일을 다시 방문하여 새 함수를 생성하겠습니다. .
dataTransfer 개체의 setData 메서드를 사용하여 이전에 저장 한 데이터를 참조 할 수 있습니다. dataTransfer 개체의 getData 메서드를 사용합니다. 설정 한 데이터는 id 였으므로 다음과 같이 반환됩니다.
검색 한 id가있는 draggable 요소를 선택합니다.
dropzone 선택 요소 :
draggable 요소를 dropzone :
dataTransfer 개체 재설정 :
이제 iv id = “의 dropzone 요소에 ondrop를 추가 할 수 있습니다. 744f9c9ebe “> :
완료되면 드래그 앤 드롭 기능이 완성되었습니다. 브라우저에서 index.html를보고 draggable 요소를 dropzone로 드래그합니다.
이 예에서는 드래그 가능한 단일 항목과 단일 놓기 대상의 시나리오를 처리합니다. 드래그 가능한 여러 항목, 여러 드롭 대상을 가질 수 있으며 다른 모든 드래그 앤 드롭 API 이벤트 핸들러로 사용자 정의 할 수 있습니다.
3 단계 — 드래그 가능한 여러 항목이 포함 된 고급 예제 빌드
다음은이 API를 사용하는 방법에 대한 또 다른 예입니다. 이동할 수있는 드래그 가능한 작업이 포함 된 할 일 목록입니다. "To-do" 열을 "Done" 열에 추가합니다.
자신의 할일 목록을 만들려면 고유 한 id s에서 index.html :
보기 index.html 브라우저를 열고 할 일 열의 항목을 완료 열로 끕니다. 할 일 응용 프로그램을 만들고 기능을 테스트했습니다.
결론
이 문서에서는 끌어서 놓기 기능을 탐색하기 위해 할 일 앱을 만들었습니다. 최신 웹 브라우저에서 사용할 수 있습니다.
Drag and Drop API는 끌어서 놓기 이상의 작업을 사용자 지정하기위한 여러 옵션을 제공합니다. 예를 들어 드래그 한 항목의 CSS 스타일을 업데이트 할 수 있습니다. 또한 항목을 이동하는 대신 드래그 할 수있는 항목을 복사하여 드롭시 복제되도록 선택할 수 있습니다.
많은 웹 브라우저가이 기술을 지원하지만 신뢰할 수 없을 수도 있습니다. 청중이이 기능을 지원하지 않는 장치로 구성되어 있다면 그것에 대해 알아보십시오.
Drag and Drop API로 드롭 할 수있는 모든 것에 대해 자세히 알아 보려면 MDN의 문서를 확인하세요.