드래그 앤 드롭 예제
Drag`n`Drop은 훌륭한 인터페이스 솔루션입니다. 무언가를 가져 가고 드래그 앤 드롭하는 것은 복사 및 이동 (파일 관리자 참조)에서 주문 (장바구니에 드롭)에 이르기까지 많은 작업을 수행하는 명확하고 간단한 방법입니다. 첫 번째 아이디어는 무엇입니까? 마우스오버/마우스업 처리기를 잠재적인 드롭블에 설정하고 마우스 포인터가 그 위에 나타나는 시기를 감지할 수 있습니다. 그리고 우리는 우리가 그 요소에 이상 / 삭제드래그하는 것을 알고있다. 즉, “끌어놓을 수 있는” 요소를 “드롭 가능” 요소에 놓습니다. 마우스를 드래그하면 이상한 동작이 표시됩니다. Trello의 말하기, 드래그 앤 드롭의 작업 관리 추적기의 구현은 매우 유용합니다. 여기에 Trello가 그렇게 멋진 만드는 것에 꽤 충실 유지 예입니다. 패널을 열에서 열로 드래그할 수 있으며, 무언가를 새 지점으로 옮길 때 색상 변경 효과가 매우 효과 있습니다. 마지막으로 실제 드롭을 수행할 수 있는 드롭 이벤트가 있습니다. 전체 드래그 앤 드롭 프로세스를 모니터링하기 위해 첨부 할 수있는 여러 가지 이벤트가 있습니다 : 그들은 쉽게 간단한 작업을 해결할 수 있기 때문에 흥미롭고 브라우저에 “외부”파일의 drag`n`drop을 처리 할 수 있습니다.
그래서 우리는 OS 파일 관리자에서 파일을 가져 와서 브라우저 창에 드롭 할 수 있습니다. 그런 다음 자바 스크립트는 그 내용에 액세스 할 수 있습니다. 드래그 앤 드롭은 수십 년 동안 우리와 함께하고있다. 데스크톱 과 모바일 앱과 운영 체제 모두에서 작업을 수행하는 데 도움이됩니다. 단순성과 직관적인 기능으로 인해 가장 보편적인 UI 기능 중 하나가 되었습니다. 위의 예에서는 공이 항상 이동되므로 중앙이 포인터 아래에 있습니다: DnD 이벤트를 다른 유형의 콘텐츠로 사용하여 데스크톱에서 파일을 드래그하는 것이 수행됩니다. 주요 차이점은 드롭 처리기입니다. dataTransfer.getData()를 사용하여 파일에 액세스하는 대신 해당 데이터는 dataTransfer.files 속성에 포함됩니다. 이 이벤트에 대한 수신기는 이 위치에 대해 드롭이 허용되는지 여부를 표시해야 합니다. 리스너가 없거나 수신기가 작업을 수행하지 않는 경우 기본적으로 드롭이 허용되지 않습니다. 마우스 이벤트를 사용하여 Drag`n`Drop을 구현하는 방법을 살펴보겠습니다.
그 것도 어렵지 않습니다. 데스크톱에서 브라우저로 파일을 드래그하는 전체 가이드는 JavaScript에서 로컬 파일 읽기를 선택하기 위해 드래그 앤 드롭 사용을 참조하십시오. 현대 HTML 표준에는 드래그 스타트, 드래그 엔드 등과 같은 특수 이벤트가있는 드래그 앤 드롭에 대한 섹션이 있습니다. 브라우저에서 바탕 화면으로 파일을 드래그하는 전체 가이드는 CSS 닌자에서 Gmail과 같은 파일을 드래그합니다. 이제 HTML 5는 브라우저에 기본 DnD 지원을 제공하여 코딩하기가 훨씬 쉬워지도록 드래그 앤 드롭 (DnD) API를 마련했습니다. 기본 Drag`n`Drop 알고리즘은 다음과 같습니다: 열 샘플의 흥미로운 점은 열이 드래그 소스와 놓기 대상이라는 것입니다. 더 일반적인 시나리오는 소스 및 대상 요소가 다를 수 있도록 하는 것입니다. 데모는 html5demos.com/drag 참조하십시오.
드래그 앤 드롭을 통해 이미지를 추가하는 것은 매우 일반적입니다. 그러나 위의 만화경처럼이 스니펫은 독특한 사용 사례를 제공합니다. 이미지를 지정된 div로 드래그하면 원래 크기의 최대 20배까지 확장할 수 있는 CSS 기반 픽셀 아트를 만듭니다. 또한 CSS 코드를 출력하여 프로젝트에 붙여넣습니다. 이 UI가 얼마나 유용할 수 있는지 잘 설명합니다. 다음은 기본 사항입니다. 예를 들어 드롭 가능한 요소(드롭에 사용 가능)를 강조 표시하여 이를 확장할 수 있습니다. dataTransfer 속성은 모든 DnD 마법이 발생하는 곳입니다. 끌기 동작에서 전송된 데이터의 조각을 보유합니다. dataTransfer는 드래그 스타트 이벤트에서 설정되고 드롭 이벤트에서 읽기/처리됩니다.
e.dataTransfer.setData(형식, 데이터)를 호출하면 개체의 콘텐츠가 마임형으로 설정되고 데이터 페이로드가 인수로 전달됩니다.
