모든 기술 스택의 모든 경험을 위한 빠른 드래그 앤 드롭
문서 | ? 예 | ? 작동 원리
실용적인 드래그 앤 드롭은 드래그 앤 드롭 기능이 내장된 브라우저를 안전하고 성공적으로 사용할 수 있게 해주는 낮은 수준의 드래그 앤 드롭 도구 체인입니다. 실용적인 드래그 앤 드롭은 모든 뷰 레이어( react , svelte , vue , angular 등)에서 사용할 수 있습니다. 실용적인 드래그 앤 드롭은 Trello, Jira 및 Confluence를 포함하여 웹에서 가장 큰 제품 중 일부를 지원하고 있습니다.
실용적인 드래그 앤 드롭은 몇 가지 높은 수준의 부분으로 구성됩니다.
실용적인 드래그 앤 드롭에는 드래그 앤 드롭 환경을 만드는 데 필요한 요소를 제공하는 핵심 패키지와 다양한 옵션 패키지가 포함되어 있습니다.
이러한 작품은 시각적 언어나 접근성에 대해 편견이 없으며 Atlassian 디자인 시스템에 의존하지 않습니다.
4.7kB 코어우리는 일관된 Atlassian 사용자 경험을 매우 빠르게 구축할 수 있도록 선택적 시각적 출력(예: 낙하 표시기)을 만들었습니다. Atlassian 소비자가 아닌 경우 이러한 출력을 사용하거나, 시각적 스타일을 복사하는 자신만의 출력을 만들거나, 완전히 다른 방향으로 나아갈 수 있습니다.
모든 사용자가 포인터 기반 드래그 앤 드롭 경험을 얻을 수 있는 것은 아닙니다. 보조 기술 사용자에게 환상적인 경험을 제공하기 위해 우리는 모든 경험에 대해 성능이 뛰어난 보조 기술 친화적인 흐름을 신속하게 연결할 수 있는 도구 체인을 제공합니다.
우리가 제공하는 선택적 보조 컨트롤은 Atlassian Design System을 기반으로 합니다. Atlassian 디자인 시스템을 사용하고 싶지 않은 경우에는 당사 지침을 사용하여 구성 요소를 자신의 구성 요소로 대체하거나 원하는 경우 접근성에 대해 다른 방식으로 접근할 수 있습니다.
이 저장소는 현재 Pragmatic 드래그 앤 드롭을 위한 모든 코드가 포함된 내부 모노 저장소의 단방향 미러입니다.
이 저장소의 목적은 코드를 공개하는 것이지만 (이 단계에서는) 코드 기여를 허용하지 않는 것입니다. 앞으로는 이 저장소에 대한 기여가 모노 저장소로 돌아갈 수 있도록 양방향 미러 설정을 탐색할 수 있습니다. 이 저장소에 대한 문제나 제안을 제기하는 것은 언제든지 환영합니다!
모든 문서와 npm 패키지는 공개되어 누구나 사용할 수 있습니다.
네! 작은 핵심 패키지로 실용적인 드래그 앤 드롭을 제공하고 다양한 옵션 패키지를 제공합니다. 일부 선택적 패키지는 스타일 지정 솔루션(예: emotion ), 뷰 라이브러리(예: react ) 또는 일부 추가 Atlassian 출력(예: @atlaskit/tokens )에 종속됩니다. 우리는 다른 종속성이 있는 선택적 패키지를 분리하여 자체 기술 스택과 시각적 출력을 사용하는 자체 조각으로 쉽게 교체할 수 있도록 했습니다.
네! 우리는 제품에서 드래그 앤 드롭을 구현하는 방법을 구현하는 몇 가지 디자인 지침을 만들었으며 이러한 결정 중 일부는 일부 옵션 패키지에 구현되었습니다. 그러나 우리 언어를 포함하여 원하는 디자인 언어를 자유롭게 사용할 수 있습니다!
@atlaskit 무엇입니까? Pragmatic 드래그 앤 드롭 패키지는 npm 의 @atlaskit 네임스페이스에 게시됩니다.
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter' ; @atlaskit 은 내부 모노레포 내부에서 모든 공개 패키지를 게시하는 npm 네임스페이스입니다. 앞으로는 단지 실용적인 드래그 앤 드롭을 위해 별도의 네임스페이스를 만드는 것을 고려해 볼 수 있습니다. 그렇게 하면 사람들이 자동으로 전환하는 데 도움이 되는 몇 가지 도구를 출시할 것입니다.
사랑으로 만든 사람:
실용적인 드래그 앤 드롭은 드래그 앤 드롭 사양을 만들고 브라우저에서 드래그 앤 드롭을 구현한 사람들과 그 이전에 나온 많은 드래그 앤 드롭 라이브러리를 포함하여 거대 기업의 어깨 위에 있습니다.
