여러 항목으로 접근 가능한 드래그 앤 드롭

이 기사에서는 여러 요소 처리 및 키보드 접근성에 대한 HTML5 드래그 앤 드롭 기능 향상을 보여줍니다. Drag-and-Drop API에 대한 기본적인 친숙 함을 가정하면 (초보자를위한 입문 기사 참조) 기능을 확장하는 데 중점을 둡니다.

. 여러 요소에 대한 핵심 데이터 조작이 간단하지만 ( 대신 별도 배열 사용) 사용자 인터페이스 복잡성은 크게 증가합니다. 기본 드래그 앤 드롭에는 후자가 부족하기 때문에 사전 선택 메커니즘과 키보드 지원을 다룰 것입니다. 참고 : 터치 이벤트와 브라우저 폴리 플릴은이 기사의 범위를 벗어납니다. 제시된 솔루션은 Windows가 아닌 단일 페이지 내에서 작동합니다.

주요 개선 사항 :

dataTransfer 여러 항목 선택 및 키보드 내비게이션을위한 html5 드래그 앤 드롭 향상, 접근성 향상. 배열은 드래그 중에 여러 요소를 추적하여 ID가 ​​정적이 아닌 동적 환경 (예 : CMS 시스템)으로의 통합을 단순화합니다. 키보드 접근성은 ARIA 속성 (, ) 및 표준 키 스트로크 (선택을위한 공간, 드롭의 경우 m/명령 m)를 사용하여 구현됩니다. 단순화 된 인터페이스는 연속 선택을 피하고, 모든 수정 자 키를 비 연속 선택을 위해 동일하게 처리합니다. 동적 ARIA 속성 업데이트는 원활한 교차 모달 (마우스/키보드) 상호 작용을 보장합니다 강력한 크로스 브라우저 호환성은 Mac/WebKit에서 발사되지 않는 낙하 이벤트와 같은 문제를 해결합니다.

기본 드래그 앤 드롭 (단순화 된 예) : 기능 예제는 마우스 상호 작용을 사용하여 단일 요소에 대한 기본 드래그 앤 드롭을 보여줍니다. 이 코드는 요소 ID에 대해 에 의존하는 대신 항목 참조를 유지하고 프로세스를 단순화하고 서버 측 응용 프로그램에 대한 적응성을 향상시킵니다. 및 는 일관되지 않은 브라우저 지원으로 인해 생략됩니다. Draggable 속성은 JavaScript를 통해 동적으로 적용되어 우려 사항을 분리하고 구현 구현이 깨진 구현을 제외 할 수 있습니다 (이전 오페라 버전). HTML은 식별을 위해

속성을 ​​사용합니다

액세스 가능한 드래그 앤 드롭 구현 :
• 접근성이 가장 중요합니다. 드래그 앤 드롭에 대한 Aria 저작 관행 지침을 준수합니다
  드래그 가능한 요소를 사용하고
  1. 를 사용하며 키보드가 가능합니다 spacebar는 요소를 선택합니다. 선택시"참 "이됩니다. Control M/Command M은 선택을 완료합니다 (첫 번째 드롭 대상으로의 바로 가기). 대상 요소는 aria-grabbed="false"를 사용하여 허용 된 동작을 나타냅니다 Control M/Command M 또는 Enter는 대상 요소에서 드롭 작업을 수행합니다. 탈출은 작업을 취소합니다 사후 조치 정리 재설정 및
     . aria-grabbed
     우리는 다음과 같은 권장 사항을 향상시킬 것입니다. 선택 끝 키 스트로크는 선택 사항이며, 제어 m/명령 M에는 삭제를 위해 Enter가 보충됩니다. 단순화를 위해 모든 수정 자 키 (Shift, Control, Command)가 비 연속적 인 선택을 활성화합니다.
     다중 선택 (마우스 및 키보드) :
     코드는 Draggable Elements에 속성을 ​​추가합니다. 마우스 선택은 (단일/리셋) 및 aria-dropeffect (deselect/multude)를 사용합니다. 키보드 선택은 선택을 위해 스페이스 바와 함께 를 사용하고 여러 선택의 경우 수정자를 처리합니다. A 속성은 선택이 단일 컨테이너에 한정되도록합니다. ,
  및 함수는 선택 상태를 관리합니다
  2. 선택 (마우스 및 키보드)을 드래그합니다 :
  3. 는 유효한 드롭 대상을 나타내는 데 사용됩니다. 키보드 상호 작용은 선택시
  를 추가합니다. 마우스 상호 작용의 경우 및
  4. 이벤트는 이벤트 버블 링을 처리하기 위해 변수 및 기능을 사용하여 호버 상태를 관리합니다. 는 키보드 내비게이션을 개선하기 위해 대상 컨테이너 내 항목에서 제거됩니다. aria-dropeffect aria-grabbed 선택 (마우스 및 키보드)을 떨어 뜨립니다
  이벤트 (마우스) 핸들이 떨어지고 재설정됩니다. 브라우저 불일치로 인해 A 이벤트가 생략됩니다. 키보드 상호 작용은 대상 컨테이너의
  이벤트를 사용하여 드롭을 처리하여 재설정 문제를 피하기 위해 초점을 관리합니다.

  추가 개선 사항 :

  향후 개선에는 터치/포인터 이벤트 지원, 브라우저 폴리 플릴, 선택 분류, 사용자 정의 가능한 사본/움직임 액션, 인접 선택, 맞춤형 드래그 유령 및 드래그 중 시각적 신호가 포함될 수 있습니다. 코드는 GitHub (원본 텍스트로 제공된 링크)에서 사용할 수 있습니다.

  faqs : FAQS 섹션은 접근 가능한 드래그 앤 드롭 구현에 대한 일반적인 질문에 대한 명확하고 간결한 답변을 제공하며 여러 요소, 낙하 가능한 영역, 주문 제어, 오류 처리 및 테스트를 다루고 있습니다.

위 내용은 여러 항목으로 접근 가능한 드래그 앤 드롭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!