HTML 드래그 앤 드롭인터페이스를 통해 응용 프로그램은 브라우저에서 끌어서 놓기 기능을 사용할 수 있습니다.사용자가 선택할 수 있습니다 드래그 가능요소를 마우스로 드래그하여 떨어뜨릴 수 있는요소를 클릭하고 마우스 버튼을 놓아 드롭합니다. 반투명 표현 드래그 가능요소는 끌기 작업 중에 포인터를 따릅니다.
웹 사이트, 확장 및 XUL 응용 프로그램의 경우 어떤 요소가 될 수 있는지 사용자 지정할 수 있습니다. 드래그 가능, 피드백 유형 드래그 가능요소가 생성하고 떨어뜨릴 수 있는집단.
HTML 끌어서 놓기에 대한 이 개요에는 인터페이스에 대한 설명, 응용 프로그램에 끌어서 놓기 지원을 추가하는 기본 단계 및 인터페이스의 상호 운용성 요약이 포함됩니다.
드래그 이벤트
| 이벤트 | 이벤트 핸들러에서 | 다음과 같은 경우에 발생합니다. |
|---|---|---|
| 견인 | 온드래그 | …ㅏ 드래그된 항목(요소 또는 텍스트 선택)이 드래그됩니다. |
| 드래젠드 | 온드라젠드 | ... 끌기 작업이 종료됩니다(예: 마우스 단추를 놓기 또는 Esc 키 누르기, 끌기 완료 참조). |
| 드래젠터 | 온드라젠터 | … 드래그한 항목이 유효한 놓기 대상으로 들어갑니다. ( 놓기 대상 지정 을 참조하십시오.) |
| 드래그 엑시트 | 온드라그엑시트 | … 요소는 더 이상 끌기 작업의 즉각적인 선택 대상이 아닙니다. |
| 드래그리브 | 온드라이브 | … 드래그한 항목이 유효한 놓기 대상을 남깁니다. |
| 드래그오버 | 온드래거 | ...끌어놓은 항목이 수백 밀리초마다 유효한 놓기 대상 위로 드래그됩니다. |
| 드래그스타트 | ondragstart | ...사용자가 항목을 끌기 시작합니다. ( 끌기 작업 시작 을 참조하십시오.) |
| 하락 | 하락 | … 아이템이 유효한 놓기 대상에 떨어졌습니다. (드롭 수행을 참조하십시오.) |
메모: OS에서 브라우저로 파일을 드래그할 때 dragstart 및 dragend 이벤트가 발생하지 않습니다.
인터페이스
기본
이 섹션은 끌어서 놓기 기능을 응용 프로그램에 추가하는 기본 단계에 대한 요약입니다.
무엇인지 식별 드래그 가능
요소 만들기 드래그 가능다음 코드 샘플과 같이 draggable 속성과 ondragstart 전역 이벤트 핸들러를 추가해야 합니다.
이 요소는 드래그할 수 있습니다.
자세한 내용은 다음을 참조하세요.
드롭을 처리 효과
drop 이벤트에 대한 핸들러는 애플리케이션별 방식으로 드래그 데이터를 자유롭게 처리할 수 있습니다.
일반적으로 응용 프로그램은 getData() 메서드를 사용하여 드래그 항목을 검색한 다음 그에 따라 처리합니다. 또한 응용 프로그램 의미는 값에 따라 다를 수 있습니다.
드래그 앤 드롭 기능은 iPad의 성능을 향상시키는 데 도움이 될 수 있습니다. 사용 방법은 다음과 같습니다.
따라서 한 클라우드 스토리지 서비스에서 다른 클라우드 스토리지 서비스로 파일을 이동하거나 Safari에서 텍스트 편집 앱으로 텍스트를 복사하여 인용문을 추가하거나 특정 사진을 파일 스토리지 앱에 백업할 수 있습니다.
사진, 파일 및 텍스트를 끌어다 놓는 방법
1. 다른 앱으로 드래그하려는 사진, 파일 또는 강조 표시된 텍스트를 길게 터치합니다.
2. 항목을 이 응용 프로그램의 원하는 위치 또는 Slide Over 또는 Split View에서 연 다른 위치로 끌어서 놓습니다.
한 번에 여러 사진 또는 파일을 끌어다 놓는 방법
1. 드래그하려는 사진이나 파일 중 하나를 길게 터치합니다.
2. 현재 항목을 드래그하는 동안 드래그하려는 다른 사진이나 파일을 탭합니다. 이동하고 싶은 만큼의 요소로 다시 수행하십시오.
3. 선택한 모든 개체를 Slide Over 또는 Split View에서 연 다른 응용 프로그램의 지정된 위치로 끌어서 놓습니다.
한 응용 프로그램에서 다른 응용 프로그램으로 텍스트를 드래그하는 방법
1. 드래그하여 선택하려는 텍스트 부분을 길게 누릅니다.
2. 선택 지점을 사용하여 드래그하려는 나머지 텍스트를 강조 표시합니다.
3. 선택한 텍스트를 길게 누릅니다.
4. 텍스트를 배치하려는 응용 프로그램으로 끌어서 놓습니다.
"드래그 앤 드롭"을 사용하여 한 번에 여러 응용 프로그램의 아이콘 위치를 변경하는 방법
대부분의 iOS 드래그 앤 드롭 기능은 iPad에서만 작동하지만 이 트릭은 실제로 iPhone과 iPad 모두에서 작동합니다. 이를 통해 홈 화면에서 다음을 사용하여 애플리케이션의 위치를 구성할 수 있습니다. « 드래그 앤 드롭'을 사용하여 하나씩 이동하지 않습니다.
1. 홈 화면에서 위치를 변경하려는 앱의 아이콘을 길게 터치합니다.
2. 이동하려는 추가 앱을 탭합니다.
3. 이러한 앱을 원하는 페이지나 폴더로 끌어다 놓습니다.
182
이 예에서는 div 요소를 선택하고 호출하여 이동 가능하게 만듭니다. draggable() 메서드. 아래 그림과 같이 열린 문서에서 요소는 일반적인 위치를 차지하지만 그 이후에는 브라우저 창의 아무 곳이나 마우스 포인터로 이동할 수 있습니다.
끌어서 놓기 기능은 그 자체로 유용하지만 다음에 설명하는 Droppable 상호 작용과 함께 사용하면 훨씬 더 유용합니다.
드래그 가능한 상호 작용은 특정 HTML 마크업 및 CSS 스타일을 통해서만 구현됩니다. 즉, 이 기능은 거의 모든 브라우저에서 작동하지만 이 기능이 부여된 요소는 운영 체제의 유사한 기본 끌어서 놓기 기능으로 작동할 수 없습니다.
HTML5 사양에 정의된 끌어서 놓기 작업은 일반적으로 기본 운영 체제 메커니즘을 사용하여 구현됩니다. jQuery UI 끌어서 놓기 메커니즘을 사용하는 경우 충돌을 피하기 위해 HTML5에 해당하는 기능을 비활성화하는 것이 가장 좋습니다. 이렇게 하려면 문서 본문 요소의 draggable 속성을 false로 설정합니다.
드래그 가능한 상호 작용 사용자 정의
Draggable 상호 작용에 대한 많은 사용자 지정 옵션이 있습니다. 다음 섹션에서 다루는 가장 중요한 속성은 아래 표에 요약되어 있습니다.
| 재산 | 설명 |
|---|---|
| 중심선 | 특정 방향으로의 이동을 제한합니다. 기본값은 제한이 없음을 의미하는 false이지만 "x"(x축을 따라만 이동) 또는 "y"(y축을 따라만 이동) 값을 지정할 수도 있습니다. |
| 방지 | 플로팅 요소의 위치를 화면의 특정 영역으로 제한합니다. 지원되는 값 유형은 해당 예제와 함께 아래 표에 설명되어 있습니다. 기본값은 false이며 제한이 없음을 의미합니다. |
| 지연 | 요소가 이동하기 전에 끌어야 하는 시간을 지정합니다. 기본값은 지연이 없음을 의미하는 0입니다. |
| 거리 | 요소가 실제로 이동하기 전에 시작 위치에서 요소를 끌어야 하는 거리를 지정합니다. 기본값은 1픽셀입니다. |
| 그리드 | 이동된 요소를 그리드 셀에 강제로 바인딩합니다. 기본값은 바인딩이 없음을 의미하는 false입니다. |
이동 방향 제한
요소의 이동을 특정 방향으로 제한할 수 있는 몇 가지 방법이 있습니다. 첫 번째는 X 또는 Y 축으로 이동 방향을 제한할 수 있는 축 옵션을 사용하는 것입니다. 예는 다음과 같습니다.
...