Vue.js 2의 드래그 앤 드롭 구현

Easy-DnD는 HTML5 드래그 앤 드롭 API 대신 표준 마우스 이벤트만 사용하는 Vue.js 2용 드래그 앤 드롭 구현입니다. 작업 불가능 . 마우스를 사용하거나 마우스 지원 복사/잘라내기-붙여넣기를 지원하여 일부 구성 요소에서 다른 구성 요소로 데이터를 전송하는 방법으로 생각하십시오. 또한 끌어서 놓기로 목록을 재정렬할 수 있습니다.

시민

이 데모는 예쁘고 실제 사례를 반영하기 위한 것입니다. 더 많은 베어본 예제는 매뉴얼을 참조하십시오.

다음 데모는 새 항목을 삽입할 때 목록 재정렬, 두 목록 간 끌어서 놓기, 사용자 지정 드래그 이미지 및 사용자 지정 피드백을 제공합니다. Vuetify 구성 요소를 사용합니다.

어디에서 눈사태 암호를 살 수 있습니까?

https://codesandbox.io/s/easy-dnd-demo-9mbij

다음 데모는 테이블과 목록 간의 드래그 앤 드롭, 사용자 지정 드래그 이미지 및 드롭이 허용되는 경우 드롭 영역에 대한 사용자 지정 스타일을 제공합니다. Vuetify 구성 요소를 사용합니다.

https://codesandbox.io/s/easy-dnd-demo-2-xnqbz

안내서

개요

Drag, Drop, DropMask 및 DropList의 네 가지 구성 요소가 있습니다.

드래그 구성 요소는 데이터를 내보낼 수 있는 영역을 정의하기 위한 것입니다. Drop 구성 요소는 데이터를 가져올 수 있는 영역을 정의하기 위한 것입니다. 드롭 구성 요소는 임의 깊이의 계층을 형성하는 중첩될 수 있습니다. DropMask 구성 요소는 Drop 구성 요소 위에 드래그 앤 드롭에 둔감한 섬을 만들기 위한 것입니다. DropList 구성 요소는 끌어다 놓기 및 재정렬을 지원하는 항목 목록을 표시하는 특별한 종류의 놓기 구성 요소입니다.

이벤트

모든 이벤트는 다음 속성을 통해 끌기 작업의 현재 상태를 전달합니다.

• |_+_| : 전송되는 데이터의 유형
• |_+_| : 전송 중인 데이터
• |_+_| : 마우스 커서의 현재 위치
• |_+_| : 현재 마우스 커서 아래에 있는 맨 앞의 Drop 구성 요소(있는 경우)
• |_+_| : dragenter 및 dragleave의 경우 top의 이전 값(있는 경우)
• |_+_| : 드래그가 시작된 드래그 컴포넌트

드래그 구성 요소는 다음 이벤트를 발생시킵니다.

• |_+_| : 드래그 작업이 시작될 때 트리거됩니다.
• |_+_| : 드래그 작업이 종료될 때 트리거됩니다(성공 여부).
• |_+_| / |_+_| : 데이터를 제거/복사해야 하는 Drop 구성 요소에서 드래그 작업이 성공적으로 완료되면 트리거됩니다.

Drop 구성 요소는 다음 이벤트를 발생시킵니다.

• |_+_| : 마우스가 Drop 구성 요소에 들어갈 때 트리거됩니다.
• |_+_| : 마우스가 Drop 구성 요소를 떠날 때 트리거됩니다.
• |_+_| : 마우스가 Drop 구성 요소 위로 이동할 때 트리거됩니다.
• |_+_| : Drop 구성 요소에서 드롭 작업이 완료될 때 트리거됩니다.

DropList 구성 요소는 다음 이벤트를 내보냅니다(Drop 구성 요소에서 내보낸 이벤트 외에).

• |_+_| : 데이터가 목록에 삽입될 때 트리거됨(속성: |_+_|, |_+_| 및 |_+_|)
• |_+_| : 데이터를 재정렬해야 할 때 트리거됩니다(속성: |_+_|, |_+_| 및 |_+_| - apply는 지정된 배열에 필요한 재정렬을 적용하는 함수입니다)

데이터

내보내기: 끌기 작업이 끌기 구성 요소에서 시작될 때 내보내는 데이터는 |_+_| 재산.

가져오기: Drop 구성 요소에서 끌기 작업이 종료되면 |_+_| 이벤트가 트리거되고 이벤트가 |_+_| 수입될.

모드

드래그 앤 드롭은 드래그의 원점에 미치는 영향에 따라 가능한 여러 모드에서 발생할 수 있습니다.

• |_+_| (기본값) : 드래그 소스가 드래그 작업의 영향을 받지 않는 경우,
• |_+_| : 드래그 작업이 완료될 때 드래그 소스를 제거할 경우.

드롭 구성 요소는 |_+_|를 사용하여 데이터를 드롭할 때 트리거되어야 하는 모드를 선언해야 합니다. 재산.

|_+_|를 선언하는 Drop 구성 요소에서 끌기 작업이 완료되면 (각각 |_+_|) 모드, |_+_| (각각 |_+_|) 이벤트는 드래그 작업이 시작된 드래그 구성 요소에서 발생합니다. 이것은 예를 들어 |_+_| 이벤트.

드래그 작업이 |_+_| 이벤트가 발생하면 |_+_|를 선언하는 Drop 구성 요소에서 삭제가 금지됩니다. 방법.

유니콘을 사는 방법

다음 데모는 작동 중인 모드를 보여줍니다.

https://codesandbox.io/s/example-2-r8n1k

유형

드래그 작업 할 수있다 유형이 있습니다. 유형은 전송되는 데이터의 종류를 정의하는 데이터 구조(단순한 문자열일 수 있음)입니다. 끌기 작업의 유형은 |_+_| 소품.

Drop 구성 요소는 해당 유형을 허용하는 경우 끌기 작업에 참여한다고 합니다(기본값은 모든 유형을 허용하는 것입니다). Drop 구성 요소가 허용하는 유형은 |_+_| prop(문자열, 문자열 배열 또는 유형을 매개변수로 사용하고 부울을 반환하는 함수일 수 있음).

Easy-DnD에 관한 한 Drop 구성 요소가 현재 드래그 작업의 유형을 허용하지 않으면 드래그 앤 드롭에 민감하지 않은 페이지의 다른 부분처럼 작동합니다. 드래그하는 동안 무시되고 특수 CSS 클래스가 적용되지 않으며 특수 커서/드래그 이미지가 표시되지 않으며 특수 이벤트가 트리거되지 않습니다.

다음 데모는 유형의 사용을 보여줍니다. '문자열'과 '숫자'의 두 가지 유형이 사용됩니다. '1'과 '2'를 포함하는 드래그 구성 요소는 '숫자' 유형이고 'a'와 'b'를 포함하는 요소는 '문자열' 유형입니다. 왼쪽에 있는 두 개의 Drop 구성 요소는 숫자를 허용하고 오른쪽에 있는 구성 요소는 문자열을 허용합니다. 숫자/문자열을 (각각) 드래그하면 숫자/문자열을 허용하는 Drop 구성 요소만 (각각) 반응합니다(즉, 드래그 이미지, CSS 클래스, 커서가 적용됨). 나머지는 혼자 남습니다.

https://codesandbox.io/s/example-3-g7io8

삭제 가능한 데이터 제한

Drop 구성 요소는 |__+_|를 통해 허용하는 데이터를 제한할 수 있습니다. prop(데이터와 유형을 매개변수로 사용하고 부울 값을 반환하는 함수).

다음 데모는 3개의 Drop 구성 요소로 드래그할 수 있는 5개의 Drag 구성 요소를 정의합니다. 하나는 짝수를 허용하고 하나는 홀수를 허용하며 다른 하나는 모든 숫자를 허용하지만 드래그가 완료되면 제거합니다.

https://codesandbox.io/s/easy-dnd-demo-fo078

마우스 커서

드래그가 진행되지 않으면 커서가 |_+_| 마우스가 드래그 구성 요소 위에 있을 때. 드래그가 진행 중인 경우 커서가 현재 드래그 작업의 유형을 허용하는 Drop 구성 요소 위에 있지 않는 한 |_+_|로 바뀝니다. 그러면 |_+_|로 바뀝니다. Drop 구성 요소가 드래그되는 데이터를 허용하는 경우 |__+_| 그렇지 않으면.

이미지 드래그

드래그하는 동안 이미지가 마우스 커서를 따라 이동할 수 있습니다. Easy-DnD를 사용하면 이 이미지가 항상 다른 모든 이미지 위에 표시됩니다.

드래그 구성 요소는 |_+_|를 제공합니다. 드래그 작업 중에 표시되는 기본 이미지를 설정하는 데 사용할 수 있는 슬롯:

• 슬롯이 정의되지 않은 경우 이미지는 Drag 구성 요소의 복제본입니다.
• 슬롯이 정의되고 비어 있으면 이미지가 없습니다.
• 슬롯이 비어 있지 않으면 해당 콘텐츠의 복제본이 사용됩니다.

Drop 및 DropList 구성 요소는 |_+_| 슬롯(props: |_+_| 및 |_+_|)은 현재 드래그 작업에 참여하는 경우(즉, 해당 유형을 수락하는 경우) 마우스가 이미지 위에 있을 때 표시될 이미지를 설정하는 데 사용할 수 있습니다.

• 슬롯이 정의되지 않은 경우 드래그 구성 요소에서 설정한 기본 이미지가 사용됩니다.
• 슬롯이 정의되고 비어 있으면 이미지가 없습니다.
• 슬롯이 비어 있지 않으면 해당 콘텐츠의 복제본이 사용됩니다.

DropList 구성 요소는 추가로 |_+_| |_+_|와 같은 방식으로 작동하는 슬롯(prop : |_+_| 재정렬 대상) 그러나 목록 재정렬 중에 표시될 드래그 이미지를 제어합니다.

마우스 커서를 기준으로 한 드래그 이미지의 위치는 CSS에서 transform 속성을 사용하여 제어할 수 있습니다.

다음 데모는 사용자 정의 드래그 이미지, 중첩된 Drop 구성 요소 및 마스크의 사용을 보여줍니다.

https://codesandbox.io/s/example-4-6h8zy

CSS 클래스

드래그 구성 요소에 클래스가 할당됩니다 |_+_| 마우스가 그 위에 있고 드래그 작업이 진행되지 않을 때 |_+_| 그렇지 않으면. 현재 마우스 커서 아래에 있는 Drop 구성 요소의 모드에 따라 소스 Drag 구성 요소에도 |_+_|, |_+_| 클래스가 할당됩니다. 그리고 |_+_|.

드래그 작업 중에 페이지의 Drop 구성 요소에는 여러 CSS 클래스가 할당됩니다.

• 모든 Drop 구성 요소에 대해 : |_+_| Drop 구성 요소가 드래그 작업의 유형을 허용하는 경우 |_+_| 그렇지 않으면
• 드래그 작업에 참여하는 Drop 구성 요소(즉, 해당 유형 허용):
  • |_+_| 마우스가 현재 마우스 위치에서 가장 앞에 있는 것 위에 있을 때(Drop 구성 요소가 중첩될 수 있음을 기억하십시오), |_+_| 그렇지 않으면
  • |_+_| Drop 구성 요소가 데이터를 수락하고 드래그 소스가 해당 모드를 수락하면 |_+_| 그렇지 않으면

DropMask 구성 요소

다음 데모는 DropMask 사용을 보여줍니다.

https://codesandbox.io/s/example-1-ngrlv

C++에서 사용자 입력 받기

DropList 구성 요소

DropList 구성 요소는 특수 Drop 구성 요소이므로 Drop 구성 요소의 모든 props 및 이벤트를 상속합니다. 끌기 작업의 결과가 특정 인덱스에 있는 목록의 항목으로 구성 요소로 데이터를 가져오거나 사용자가 끌어서 놓기를 사용하여 항목 목록을 재정렬할 수 있도록 하는 경우에 사용할 수 있습니다.

Drop 구성 요소와 비교하여 prop이 하나 더 있습니다.

• |_+_| : 렌더링할 항목의 배열

Drop 구성 요소와 비교하여 두 가지 이벤트가 더 있습니다.

• |_+_| : 사용자가 DropList에 데이터를 드롭할 때 발생합니다. 이 이벤트에 대한 리스너가 제공되지 않으면 목록을 삽입할 수 없습니다.
• |_+_| : 사용자가 목록을 재정렬할 때 발생합니다. 이 이벤트에 대한 리스너가 제공되지 않으면 목록을 재정렬할 수 없습니다.

Drop 구성 요소와 비교하여 세 개의 슬롯이 더 있습니다.

• |_+_| : 각 목록 항목을 렌더링하는 데 사용됩니다. 두 가지 속성이 있습니다. |_+_| 그리고 |_+_|. 재주문은 항목이 재주문 대상인 경우 true입니다. 이 슬롯의 콘텐츠에 대한 키를 제공하는 것을 잊지 마세요!!
• |_+_| : 드래그 작업이 현재 마우스 위치에서 종료된 경우 새 항목이 삽입될 위치를 표시하기 위해 자리 표시자를 렌더링하는 데 사용됩니다. 두 가지 속성이 있습니다. |_+_| 그리고 |_+_|. 이 슬롯의 콘텐츠에 대한 키를 제공하는 것을 잊지 마세요!!
• |_+_| : 목록을 재정렬할 때 사용할 드래그 이미지를 정의합니다(위의 드래그 이미지 섹션 참조).

아이템에 대한 키와 피드백은 중복을 생성하고 오류가 발생할 경우 드롭을 허용하지 않는 데 사용됩니다.

다음 데모 기능은 한 목록에서 다른 목록으로 끌어다 놓기 및 목록 재정렬 기능을 제공합니다.

https://codesandbox.io/s/droplist-ozs8b

태그

끌어서 놓기 구성 요소는 |_+_|를 지원합니다. 템플릿의 루트 역할을 할 HTML 태그(또는 Vue 구성 요소)를 제어하는 ​​데 사용할 수 있는 prop. Vue 구성 요소인 태그의 경우 모든 props, listeners 및 Slots가 정상적으로 작동합니다.

모질라가 열리지 않습니다

DragAwareMixin

구성 요소를 드래그 작업에 민감하게 만드는 믹스인을 사용할 수 있습니다. 드래그의 현재 상태를 반영하여 이를 통합하는 구성 요소에 다음 계산된 필드를 추가합니다.

• |_+_| : 드래그 작업이 진행 중이면 true, 그렇지 않으면 false
• |_+_| : 현재 드래그 작업의 유형
• |_+_| : 현재 드래그 작업의 데이터
• |_+_| : 문서를 기준으로 한 마우스의 현재 위치
• |_+_| : 드래그 작업이 시작된 드래그 구성 요소
• |_+_| : 마우스 아래에 있는 맨 앞의 Drop 구성 요소(있는 경우)

다음 데모는 진행 중인 현재 드래그 작업에 대한 정보를 표시합니다.

https://codesandbox.io/s/example-5-j8qo9

다운로드 세부 정보:

작가: 마른

라이브 데모: https://codesandbox.io/s/easy-dnd-demo-9mbij

깃허브: https://github.com/rlemaigre/Easy-DnD

#vuejs #자바스크립트 # vue-js