React-dnd: 여러 요소 드래그 지원

우선순위가 아닙니다. 드래그 소스 키를 도입한 후 재방문할 수 있습니다(https://github.com/gaearon/react-dnd/issues/38#issuecomment-73409935).

나는 당신이 dragSource가있는 구성 요소로 구성 요소 트리의 섹션을 래핑 할 수 있다고 생각하지만 앞으로 이것에 관심을 가질 것입니다 ...
Shift 키를 누른 상태에서 클릭하면 배열의 어떤 섹션이 dragItem 등에 복사되는지 확장됩니다.

좀.

먼저 null component (#38에 필요)와 동일한 key (#53에 필요)를 가진 다른 구성 요소를 전달하는 방법을 배웁니다.

그런 다음 선택 사항인 groupKey 를 추가합니다. key 와 같이 드래그 소스에 지정되며 문자열입니다. groupKey 사용하여 무언가를 드래그하기 시작하면 호출자뿐만 아니라 동일한 groupKey 사용하여 마운트된 모든 드래그 소스에서 beginDrag 호출하고 항목을 다음으로 수집합니다. 배열. item 대신 이러한 항목을 전달하여 대상 메서드를 삭제합니다. 드래그가 끝나면 항목 배열을 사용하여 드롭 대상에서 acceptDrop 를 호출한 다음 해당 항목과 함께 각 드래그 소스의 endDrag 를 호출합니다.

재미있는 점은 우리가 items.length 의 카운트를 알고 있기 때문에 사용자 정의 "복합" 썸네일 구성 요소와 위에서 스크린샷과 같은 카운터를 사용하여 DragLayer 를 그릴 수 있다는 것입니다.

내가 생각했던 것보다 훨씬 덜 추한 생각이야

:+1: 이 기능을 위해 :-)

닫습니다. 현재 이에 대한 사용 사례가 없으며 상당한 구현 노력이 필요합니다.

@gaearon

저는 예전에 Java/Swing DnD를 사용했고, 아마 이 문제를 해결하고 매우 세련되고 매우 일반적이며 유연한 프레임워크를 고안한 개발자 군대가 있었을 것입니다. 나는 오래된 데스크탑 프레임워크가 이와 같은 좋은 DnD 프레임워크를 만드는 데 있어 모든 어려운 문제를 해결했을 것이므로 연구하는 것이 좋습니다.

Java/Swing에서 이 작업을 수행하는 방법은(드래그 이미지에 대한 내장 지원이 없었음에도 불구하고) _트리 뷰 자체를 드래그 소스로 만들고 _이를 기반으로 드래그를 시작해야 하는지 여부를 결정할 수 있게 하는 것입니다. 현재 상태 및 드래그 시작 위치_. canDrag 및 beginDrag 호출 시 monitor.getInitialSourceClientOffset() 사용할 수 있습니까? 사람들은 분명히 그것을 사용할 수 있기를 원할 것입니다. 그들은 또한 수정자 키(ctrl, alt, shift)를 사용할 수 있고 드래그 소스에서 이동 또는 복사 여부를 지정하고 대상을 놓기를 원할 것입니다. 이러한 요소는 Java/Swing에서 가능하고 다른 프레임워크를 추측하고 있기 때문입니다. Swing에는 교체할 수 있는 _드래그 제스처 인식기_ 개념도 있었습니다.

목록의 모든 항목을 개별 드래그 가능으로 처리하는 것은 목록 구성 요소가 선택한 항목에 따라 구성할 드롭 페이로드/미리 보기 이미지의 종류를 파악하는 단일 드래그 소스가 되는 것과 비교할 때 어려울 것이라고 예측합니다.

또한 개발자가 _사용자가 클릭하고 끌어온 항목을 기준으로 드래그되는 항목의 순서를 변경하기를 원할 수도 있다는 점을 고려하십시오._ 저는 Windows 탐색기가 이러한 방식으로 작동한다고 생각합니다.

응용 프로그램에서 react-dnd를 사용하여 여러 항목 끌기를 구현한 사람이 있습니까? 이에 대한 현재 솔루션은 무엇입니까?

단일 드래그 소스에 대해 여러 드롭 대상을 의미했습니까?

+1 @danii1 : 여러 항목을 드래그하는 기능을 구현한 사람이 있습니까?

나는 그것을 구현했고 솔루션은 기본적으로 첫 번째 게시물에 설명되어 있습니다.

1. 선택한 항목 추적
2. CustomDragLayer를 구현하고(https://gaearon.github.io/react-dnd/docs-drag-layer.html 참조) 선택한 항목을 직접 렌더링합니다.
3. 드롭된 항목이 선택 항목의 일부인 경우 드롭 처리

나는 그것을 다음과 같이 구현했다.

1. 세트에서 선택한 항목 추적
2. 이것을 dnd Source에 속성으로 전달하십시오.
3. beginDrag에서 props에서 Set을 검색하고 드래그 항목으로 반환합니다.
4. 사용자 지정 드래그 미리보기 만들기
5. EndDrag에서 Set의 모든 항목을 dnd Target으로 이동합니다.

나는 이것에 대해 약간 다른 사용 사례가 있다고 생각합니다. 드래그할 수 없는 가장자리로 드래그할 수 있는 노드를 그리고 싶지만 노드가 이동하기 위해 연결될 때 이동하는 노드를 그리고 싶습니다. 내 현재 구현은 DraggableNode 가 움직이는 것을 감지할 때 가장자리를 그리는 CustomDragLayer 입니다( CustomDragLayer 에도 그려지지만 모든 가장자리를 isDragging() 구현하여 모든 가장자리를 DragSources로 구현하여 연결된 노드가 움직이는지 감지하여 CustomDragLayer 가 좌표를 소품으로 삽입하는 대신 스스로 그릴 수 있도록 하여 다중 드래그 상황 .

@danii1
참조용으로 구현한 것을 공유해 주실 수 있습니까?

나는 게시물을 작성하고 react-dnd + redux를 사용하여 다중 및 중첩 드래그 앤 드롭에 대한 리포지토리를 추가할 것입니다.

@nayemmajhar , 그것은 좋을 것입니다

@nayemmajhar 이것에 대한 예에 대한 업데이트가 있습니까?

저는 오래전에 reduxJS와 함께 react DnD를 사용하여 이 애플리케이션을 개발했습니다. https://www.joomshaper.com/page-builder 튜토리얼을 작성 중이지만 게시할 시간이 필요합니다

@serle 이 작업을 수행한 방법에 대한 코드 예제를 공유할 수 있습니까?

@ianmclean2011 여기에서 확인하세요: https://github.com/react-dnd/react-dnd/issues/590

https://react-dnd.github.io/react-dnd/examples-sortable-simple.html 의 정렬 가능한 예제와 유사한 예제에서 다중 드래그를 구현하려고 합니다

관심 있는 사람이 있으면 다중 드래그/그리드 보기를 구현했습니다: https://codesandbox.io/s/9j897k0mwy.
cmd/ctrl 및 Shift 키를 사용하여 여러 항목을 선택한 다음 그리드 주위로 드래그하여 아무 곳에나 삽입할 수 있습니다.

이것은 여전히 ​​데모이지만 코드를 조금 더 추상화하고 나중에 구성 요소에 패키징할 수 있습니다.

@melvynhills 선택한 모든 카드를 각 카드 구성 요소에 전달할 필요가 없는 솔루션을 조사한 적이 있습니까? 카드의 beginDrag()가 선택한 모든 카드에 대한 참조를 필요로 한다는 점을 고려하면 솔루션이 없다고 생각합니다.

@jmcrthrs 아니요, react-dnd API

@melvynhills @jmcrthrs 내가 사용한 다른 데스크탑 dnd 프레임워크는 각각의 개별 행, 셀, 항목 등을 자체 드래그 소스 및/또는 드롭 대상으로 만드는 대신 목록과 테이블을 드래그 소스/드롭 대상으로 만드는 데 의존합니다. 여러 항목을 드래그하고 목록이나 테이블 내에서 특정 드롭 위치를 가져오는 구현이 훨씬 더 깔끔해집니다. 목록이 드래그 시작 이벤트를 수신하면 단순히 현재 선택된 항목을 볼 수 있습니다.

@jedwards1211 이 라이브러리로 가능한가요? 특히 드래그가 시작되기 전에 선택되지 않은 항목을 드래그하기 시작하는 유스 케이스. react-dnd가 작동하는 방식인지 잘 모르겠습니다.

놓기 대상이 여러 개인 경우를 해결한 사람이 있습니까?
하나가 여러 항목을 드래그하고(위 솔루션 중 하나를 사용하여) 한 항목이 한 유형의 놓기 대상에 있고 다른 항목이 다른 유형에 있다고 가정해 보겠습니다. drop 는 드래그를 시작한 드래그 소스에 대해서만 트리거되지만 다른 소스에는 트리거되지 않습니다. 이동 중인 각 항목에 대해 개별적으로 드롭을 트리거하는 방법에 대한 아이디어.
예시:

편집: 이 문제에 대해 별도의 문제를 만들었습니다. https://github.com/react-dnd/react-dnd/issues/1650

@melvynhills 아마도 mousedown 핸들러가 항목 선택을 트리거하면(이 작업을 수행해야 합니다. 내가 사용한 DnD가 있는 모든 소프트웨어는 이 방식으로 작동합니다), 컨테이너 구성 요소가 드래그가 되도록 React DnD에서 제대로 작동합니다. 드래그 이벤트가 mousedown 다음에 오기 때문입니다.

선택한 모든 카드를 각 카드 구성 요소에 전달할 필요가 없는 솔루션을 조사했습니까?

이것은 개별 항목 대신 컨테이너 구성 요소를 드래그 소스로 만드는 것이 좋습니다. React DnD로 다중 선택을 구현할 필요는 없었지만 언젠가는 사람들에게 샌드박스를 만들어 유지 관리가 더 쉬운 접근 방식이라고 확신시킬 수 있습니다.

응용 프로그램에서 react-beautiful-dnd를 사용하여 여러 항목 끌기를 구현한 사람이 있습니까? 이에 대한 현재 솔루션은 무엇입니까?