React-dnd: 누가 React DnD를 사용합니까?

• 프로젝트: https://github.com/WikiEducationFoundation/WikiEduDashboard
• 유용성: 매우
• 문제: 상태 기반 애니메이션이 가장 어려운 부분이었습니다. 나는 반응 모션과 반응 CSS 전환 그룹의 조합으로 끝났습니다. 그런 다음 애니메이션 도중에 놓기 대상이 되는 것을 방지하기 위해 애니메이션 중간에 있는 항목에 대한 추가 상태를 관리해야 했습니다. 나는 https://github.com/yahoo/react-dnd-touch-backend 를 사용하게 되었고 자체 문제(드래그 중에 선택되는 텍스트)가 있었지만 애니메이션 _중_ 제어가 더 용이했습니다. 나는 아마도 이 기능과 애니메이션을 올바르게 만드는 데 ~4일의 작업일을 보냈을 것입니다. 이것은 아마도 non-react 앱에서 훨씬 더 적은 시간이 걸렸을 것입니다.

__- 어떤 제품에서 React DnD를 사용하고 있습니까?_

다양한 앱(Kanban 보드, LOB(Line of Business) 애플리케이션)에서 사용하고 있습니다.

__- 얼마나 유용합니까?_

React DnD를 사용하기 전에 나는 react 및 jquery 기반 모두에서 찾을 수 있는 모든 DnD 솔루션을 시도했고 React DnD는 훨씬 앞서 나왔습니다.

__- 얼마나 자주 문제가 발생하며 얼마나 실망스럽습니까?_

1.0 이후로 문제가 발생하지 않았습니다. 내 제품에서 최신 브라우저만 지원한다는 점은 주목할 가치가 있습니다.

__- 어떤 기능에 관심이 있습니까?_

저는 모든 기능을 다양한 영역에서 다양한 조합으로 사용하고 있습니다.

__- 제품의 스크린샷 몇 장을 첨부할 수 있습니까?_

어제 개인 프로젝트와 통합했는데(지금은 화면을 제공할 수 없습니다. 죄송합니다.) 기존 문서가 훌륭하다는 것을 알았습니다. 접근 방식은 명확하고 이해하기 쉽고 보강이 간단하고 전반적으로 친숙합니다.

솔직히 키트에 문제가 발생한 적은 없습니다. 저는 그 단순함이 가장 큰 기능이라고 생각하며, 이를 사용하여 HOC와 같은 모범 사례를 지향하는 사람들을 격려합니다.

어떤 제품에서 React DnD를 사용하고 있습니까?

Treasure Data의 새로운 웹 콘솔에서 사용합니다. 개인 프로젝트에도 사용했습니다.

얼마나 유용합니까?

굉장히 유용하다. 내가 사용한 최고의 드래그 앤 드롭 라이브러리입니다. 정교한 드래그 앤 드롭 상호 작용을 쉽게 구현하는 데 사용할 수 있다고 확신합니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?

라이브러리를 사용할 때마다 이 모든 것이 어떻게 결합되는지 기억하는 데 시간이 걸립니다. 각 부분은 어디로 가고 무엇을 합니까? 이것은 여러 번 사용한 후에도 발생합니다.

아마도 모든 부분을 보여주는 시각화가 있으면 기억하기가 더 쉬울 것입니다.

전반적으로 도서관은 내가 해야 할 모든 일을 하는 것 같습니다.

어떤 기능에 관심이 있습니까?

테스트 가능성! 드래그 앤 드롭에 대한 나의 이전 경험은 다소 좋지 않았으며 아무도 드래그 앤 드롭 관련 코드를 테스트하지 않았습니다.

모바일 지원은 해본 적이 없지만 데스크탑과 모바일을 어떻게 대상으로 해야 할지 모르겠습니다.

나는 react-dnd-touch-backend 를 보았지만 둘을 어떻게 혼합할지 모르겠습니다.

제품의 스크린샷 몇 개를 첨부할 수 있습니까?

https://gfycat.com/ScientificEvilAmericanbadger

이것은 기본적으로 그냥 놀고 있는 것입니다. react-dnd를 사용하면 파일 드롭 영역을 쉽게 구현할 수 있습니다.

어떤 제품에서 React DnD를 사용하고 있습니까?

codecks.io는 아직 개발 중이지만 초기 액세스에 가깝습니다.

얼마나 유용합니까?

많이. 브라우저 동작을 정상화하고 dnd에 대한 반응 접근 방식을 제공하면 이 라이브러리를 쉽게 생각할 수 있습니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?

문서는 훌륭하지만 작업을 시작할 때 오류 메시지 없이 작동하지 않는 놀라운 문제에 부딪쳤습니다. 안정적으로 재현할 수 없었지만 아마도 높이가 0인 드래그 대상과 관련이 있었을 것입니다.

어떤 기능에 관심이 있습니까?

브라우저 정규화, 터치 상호 작용 지원

제품의 스크린샷 몇 개를 첨부할 수 있습니까?

https://gfycat.com/CleanLegitimateAracari

저는 의료 영상 기록 보관소를 위한 검색 엔진의 박사 과정에서 React DnD를 사용했습니다. 검색 결과를 드래그하여 쿼리의 일부가 되도록 할 수 있습니다(유사한 이미지 생성). 이런 라이브러리가 없었다면 HTML5 API를 엉망으로 만들고 React와 함께 잘 작동하는지 확인해야 했을 것입니다. 더 중요한 문제에 집중할 수 있는 모든 것이 금입니다!

나는 심각한 문제가 없었지만 0.x에서 1.x로의 전환은 매우 혼란스럽고 dist 태그가 제대로 사용되지 않은 좋은 예입니다(1.0.0-rc는 업데이트 없이 latest 로 출시되었습니다. 선적 서류 비치). 어쨌든 이것은 다리 아래의 모든 물입니다. :)

1.0.0-rc는 업데이트된 문서 없이 최신 버전으로 출시되었습니다.

네, dist-tag가 어떻게 작동하는지 배우기 전이었습니다. :기쁨:

어떤 제품에서 React DnD를 사용하고 있습니까?

드래그 앤 드롭 상호 작용이 많은 클라이언트 프로젝트에 사용합니다. 주목할만한 구성 요소는 다음과 같습니다.

• 노드를 정렬하고 중첩할 수 있는 트리 보기
• Trello와 유사한 목록/카드 보기는 정렬만 지원합니다.

또한 협업 도구이기 때문에 대부분의 인터페이스 업데이트가 소켓 서버로 전달됩니다.

얼마나 유용합니까?

매우 유용합니다. 구성 요소에서 드래그 논리를 분리하고 개별적으로 테스트하는 것은 매우 쉽습니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?

내포와 정렬을 지원하는 트리뷰는 많은 문제에 직면해 있는데,

우리가 경험한 더 큰 문제 중 하나는 중첩 및 정렬을 지원하는 트리 보기를 구현하는 것이었습니다.

다양한 유형의 노드(폴더, 목록)가 있습니다. 사용자는 폴더에 무언가를 놓으면 중첩되거나 다른 노드 아래 또는 위에 정렬됩니다. 이 상호 작용에는 깜박임이 많이 발생하고 일부 버그가 있으며 때때로 성능이 저하됩니다. 이 비디오 참조: http://s.2to1.be/fAtX ,

작동 방식은 다음과 같습니다.

1. 사용자가 노드를 끌기 시작하면 노드가 해당 위치에 유지됩니다.
2. 사용자가 노드 위로 마우스를 이동 -> 새 위치의 표시기를 표시하면 이 위치가 redux 작업으로 전달됩니다. (전체 트리는 애플리케이션 상태의 일부입니다).
3. 사용자는 서버에서 노드의 새 위치를 유지하고 연결된 모든 소켓 클라이언트에 전송하는 작업을 전달하는 드래그를 종료합니다.

현재 우리는 노드가 폴더 위/아래/위에 있는지 여부를 계산하기 위해 일부 수학(이 리포지토리의 정렬 가능한 예제의 변형)을 사용합니다. 처음에는 Folder 구성 요소를 DropTarget 로 만들려고 했지만 작동하지 않아 다른 Node DropTarget 를 정렬할 수 없었습니다.

어떤 기능에 관심이 있습니까?

• 테스트 가능성
• 백엔드 전환
• 이벤트에 연결
• 브라우저 지원

제품의 스크린샷 몇 개를 첨부할 수 있습니까?

위의 동영상을 참조하세요

지난 주에 (아직 출시되지 않은) 교육 웹 앱에 react-dnd를 추가했습니다. 놀랍다! 작업에 감사드립니다!

가장 큰 승리 IMO는 react-dnd가 전체 앱에서 DnD 기능을 관리하기 위한 적절한 수준의 추상화를 제공한다는 것입니다.

분리된 단일 크기의 모든 드래그 구성 요소(정렬 가능 등)의 어색한 조합을 버릴 ​​수 있는 것 외에도 이전에는 너무 복잡하다고 생각했던 드래그 기반 기능을 몇 시간 만에 추가할 수 있었습니다. 그만한 가치가 있습니다(예: 카드를 끌어 목록 내에서 재정렬하거나 사용자 목록 아이콘으로 끌어 사용자 목록을 표시한 다음 적절한 사용자에게 놓기).

지금까지 내가 겪었던 유일한 문제는 터치 백엔드에 있었습니다. 그러나 빠르게 진행하기 위해 해킹을 할 수 있었고 누군가가 더 일반적인 풀 리퀘스트를 작업 중이라고 댓글을 남겼습니다.

이미 멋진 API를 고려할 때 내가 신경을 쓰는 주요 기능은 견고한 터치 지원입니다.

개인적으로 오픈 소스 프로젝트에 대해 풀 리퀘스트를 하지 않는 이유(어쨌든 지금까지는)에 대해 말하자면...저는 디자이너입니다. 예를 들어 이 도구를 사용하지만 내 머리는 자연스럽게 매우 다양한 종류의 문제에 대해 생각하게 됩니다. 이와 같은 라이브러리에서 발생하는 문제를 해결하는 데 능숙하지 않다는 것 외에 실제로는 평소에 하는 작업이 아니며 내 솔루션을 "신뢰"하지 않습니다. 여기에 어느 정도의 이기심이 있다는 것을 알고 있지만, 이런 식으로 행동하는 프론트엔드 개발에서 우연히도 코딩을 하는 디자이너가 몇 명 이상 있다고 생각합니다. 앱 개발의 복잡성을 제품 디자인의 복잡성과 더 밀접하게 일치시켜 도메인 간 이동이 덜 거슬릴 수 있도록 도와주는 도구로 나와 같은 디자이너를 기꺼이 도와주는 당신과 같은 사람들에게 매우 감사합니다.

참고로 저는 레이아웃 변경에 애니메이션 효과를 주기 위해 react-dnd를 react-flip-move와 함께 사용하고 있습니다. 며칠 안됐는데 둘이 너무 잘어울려요.

@arstin

이것은 완전히 내 하루를 만들었습니다. :마음:

_어떤 제품에서 React DnD를 사용하고 있습니까?_
제품은 아직 포장 중입니다.

_얼마나 유용합니까?_
매우 유용합니다. 끌어서 놓기 유형이 많이 있습니다. 구성 요소 내에서 DnD 논리를 유지하는 것은 우리의 두뇌가 모든 복잡성을 관리하는 데 도움이 되었습니다.

_얼마나 자주 문제가 발생하며 얼마나 답답합니까?_
등록하는 드롭 타겟의 양이 많기 때문에 성능에 몇 가지 문제가 있습니다. 그렇지 않으면 훌륭하게 작동합니다!

_어떤 기능에 관심이 있습니까?_
성능 및 SVG 호환성.

제품의 스크린샷 몇 개를 첨부할 수 있습니까?
완전하지는 않지만, 이것은 우리가 React-DnD로 해결하려고 하는 문제에 대한 아이디어를 줄 것입니다.

이 응용 프로그램은 전략 게임 맵 편집기와 같은 기능을 합니다. 여러 규칙에 따라 새 항목을 지도로 끌어다 놓을 수 있으며 지도에서 항목을 이동할 수도 있습니다. 우리는 온라인 게임을 만드는 것이 아니라 다른 매핑 문제를 해결하기 위해 몇 가지 아이디어를 사용합니다(아직 언급할 수 없음).

훌륭한 도서관을 주셔서 대단히 감사합니다!

반응을 사용하고 dnd 작업을 수행해야 하는 경우 이것은 생명의 은인입니다. 훌륭한 일!

나는 우리의 전송 관리 소프트웨어 에서 React DND를 사용합니다. 지금까지는 전혀 문제가 없었습니다.

사용자는 배달 정류장을 드래그하여 계산된 거리와 함께 지도에서 직접 봅니다.

어떤 제품에서 React DnD를 사용하고 있습니까?

끌어서 놓기 블록 기반 CMS(또 다른 내부 베타, 4월 클라이언트용 출시)

얼마나 유용합니까?

엄청나게. API가 다른 타사 구성 요소만큼 _정확히_ 간단하지는 않지만 매우 강력하고 실제로 필요한 모든 작업을 수행할 수 있습니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?

드물고 별로 답답하지 않습니다.

어떤 기능에 관심이 있습니까?

안정성 및 크로스 브라우저 방탄.

제품의 스크린샷 몇 개를 첨부할 수 있습니까?

어떤 제품에서 React DnD를 사용하고 있습니까?

드래그 앤 드롭을 사용하는 모든 장소에 대해 Asana 웹 애플리케이션에서 React DnD를 사용합니다. 현재 사내 Luna 프레임워크에서 React로 애플리케이션을 다시 작성하고 있으며 드래그 앤 드롭을 사용하는 모든 위치에서 다시 작성하는 동안 React DnD를 사용하고 있습니다.

얼마나 유용합니까?

우리는 매우 유용하다는 것을 알았습니다. API는 작업하기 쉽고 드래그 앤 드롭을 몇 가지 구성 요소에 포함하여 문제를 명확하게 구분할 수 있습니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?

초기 램프 업 외에는 종종 문제가 발생하지 않습니다. 우리는 TypeScript와 함께 React DnD를 사용하며, 유형 정의를 작성하는 것이 우리를 위한 램프업 기간을 단축시켰다고 생각합니다(프로세스에서 전체 API를 탐색해야 했기 때문에). 이제 우리의 문제는 일반적으로 테스트에 관한 것입니다(예: 테스트 간 정리, dnd-decorated 구성 요소로 작업하는 사내 도우미 등). 이것은 때때로 좌절감을 주기도 하지만, 이제는 사용할 범용 구성 요소나 미래 구성 요소의 기반이 되는 예제 구성 요소가 있으므로 덜 그렇습니다.

어떤 기능에 관심이 있습니까?

성능, 관심사 분리, 테스트 가능성

제품의 스크린샷 몇 개를 첨부할 수 있습니까?

@epelz 후원하려면 asana를 받아야 합니다. 그렇지 않으면 프로젝트 속도가 느려질 것입니다.

def가 react-dnd를 사용하는 Trello를 만드는 https://github.com/Asana 또는 https://github.com/FogCreek 이 훌륭한 후원자가 될 수 있습니다.

@gaearon 이 더 좋지만 페이스북이 후원을 해준다

어떤 제품에서 React DnD를 사용하고 있습니까?

차세대 UI.

얼마나 유용합니까?

극도로! 나는 문서를 좋아하지만 더 많은 실제 사례를 사용할 수 있습니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?

소품이 변경될 때 componentWillUpdate 메서드가 실행되지 않도록 하는 DragSource로 구성 요소를 장식할 때 문제가 발생했습니다. 너무 답답해서 버그를 신고해야 할 것 같습니다. 그래도 당신이 아니라 나인 것 같아요. ;)

어떤 기능에 관심이 있습니까?

성능, 안정성 및 터치 지원.

제품의 스크린샷 몇 개를 첨부할 수 있습니까?

아직은 아니지만 새 목록에서 목록을 재정렬하고 끌어오는 것이 두렵습니다. 여기의 다른 예에 비해 매우 간단합니다.

어떤 제품에서 React DnD를 사용하고 있습니까?

@teleport 에서는 작업을 재정렬하고 분류하기 위해 Zen (이동 체크리스트) 제품에서 React DnD를 사용합니다.

또한 현재 내부 프로젝트에서 사용하기 위해 React DnD를 사용하여 구현된 DnD 지원과 함께 재사용 가능한 트리 보기 구성 요소 react-dnd-treeview 를 구축했습니다. 우리는 처음에 react-ui-tree 를 사용했지만 제대로 된 UX를 얻을 수 없었고 React DnD에 대한 긍정적인 경험이 있어서 자체적으로 구현했습니다. 구성 요소는 정말 초기 단계에 있으므로 문서, CI 등이 아직 없지만 피드백은 환영합니다!

얼마나 유용합니까?

모델을 이해하는 데 시간이 좀 걸렸지만 디자인이 정말 깔끔하고 DnD가 필요한 모든 곳에서 사용하기로 결정했습니다. 매우 유용합니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?

지금까지 2가지 문제가 있었습니다.

• 터치 백엔드로 올바른 드래그 UX 얻기(성능 포함)
• 처음에는 JS에서 드롭 영역 로직을 구현하려고 시도했지만 React DnD에서 올바른 타겟 상대 좌표(타겟 위 또는 아래로 드롭할지 여부를 결정하기 위해)를 얻을 수 없어 결국 별도의 오버레이 DOM 요소를 만들기로 결정했습니다. 드롭 대상으로.

어떤 기능에 관심이 있습니까?

성능, 기본 브라우저/플랫폼의 단점을 숨깁니다.

제품의 스크린샷 몇 개를 첨부할 수 있습니까?

텔레포트 젠:

반응-dnd-트리뷰:

어떤 제품에서 React DnD를 사용하고 있습니까?
Discord - https://discordapp.com - 게이머를 위한 음성 및 문자 채팅

얼마나 유용합니까?
매우!

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?
드물게 5/10 실망스럽습니다.

어떤 기능에 관심이 있습니까?
모든 현재 기능.

우리는 Slack 데스크톱 클라이언트에 react-dnd를 거의 사용했지만 불행히도 두 가지 제한 사항에 부딪혀 결국 거래가 중단되었습니다.

1. 드래그 로직(예: 드래그가 진행 중일 때와 같이 드래그 상태를 계산하는 로직)을 사용자 정의할 수 없습니다.
   
   
   
   • 드래그 상태에서 주입된 변경 소품에 대한 응답으로 구성 요소를 변경하는 것은 매우 쉽습니다. 사용자 정의 React 구성 요소로 드래그 미리보기를 사용자 정의하는 것도 매우 간단합니다. 그러나 불행히도 드래그 작업에 첨부하는 데이터는 커서 주위에 첨부하고 따라갈 수만 있습니다. 이것은 현재 사이드바에서와 같은 사용자 경험을 배제합니다. 여기에서 팀 아이콘을 드래그하여 재정렬할 수 있으며 이러한 드래그는 y축으로만 제한됩니다. react-dnd를 사용하면 드래그 미리보기 를 한 축으로 쉽게 제한할 수 있지만 드래그할 때 커서에 연결된 데이터를 제한하는 것은 불가능합니다. 즉, 커서를 사이드바에서 수평으로 멀리 이동했지만 커서가 여전히 놓기 대상 "위에" 수직으로 있는 경우 react-dnd는 놓기 대상이 전혀 응답하지 않도록 합니다. (현재 react-dnd 👇 없이 동작하는 동작은 아래 GIF 참조)
     
     
   
   
2. 사용자 정의 드래그 레이어를 사용하면 hover 에서 작업을 수행하는 경우 일반 React 렌더 루프를 차단합니다. 사용자 정의 드래그 레이어를 원할 경우 추가 React 구성 요소를 생성해야 하고 해당 드래그 레이어는 dnd 모니터에서 props 변경에 대한 응답으로 위치를 변경하여 작동하므로 render() 는 결국 다음을 얻습니다. _많이_. 이것은 DragSource를 드래그할 때 hover 에서 다른 구성 요소(대부분 다른 드롭 대상)를 다시 렌더링하려는 경우에만 문제입니다. 우리는 hover 의 상태를 비동기적으로 변경하고 놓기 대상이 변경되지 않은 경우 호버에서 일찍 반환하여 이를 다소 완화할 수 있었지만 호버링하는 동안 놓기 대상을 변경할 때 여전히 눈에 띄는 지연이 있었습니다.

피드백이 도움이 되기를 바랍니다! 나는 Slack 앱에서 그것을 사용할 가능성을 조사하는 동안 react-dnd로 작업하는 것을 즐겼고, 가능하다면 이러한 한계를 극복하는 것을 보고 싶습니다.

어떤 제품에서 React DnD를 사용하고 있습니까?

웹 페이지를 만드는 새로운 방법인 tylio 에서 사용합니다. React-dnd는 콘텐츠를 업로드하는 페이지의 전면 중앙에 있습니다.

얼마나 유용합니까?

굉장히 유용하다; 모든 움직이는 부분을 한 번에 이해해야 하기 때문에 처음에는 머리를 감싸는 것이 약간 어렵지만 클릭하면 잘 됩니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?

우리의 경우는 크기가 다른 항목을 재정렬하고 이동하며 뒤집히는 것을 원하지 않기 때문에 매우 복잡합니다. 문제가 좀 있긴 했지만 라이브러리 자체보다는 사용법이 더 문제였던 것 같아요.

어떤 기능에 관심이 있습니까?

거의 그들 모두! 다양한 유형의 드래그 소스 및 드롭 대상, 기본 파일/URL/텍스트, HTML5 및 맞춤형 드래그 레이어가 있는 터치 백엔드를 사용합니다.

제품의 스크린샷 몇 개를 첨부할 수 있습니까?

Typescript와 함께 사용하는 사람이 있다면 기본적인 예를 들어 주시겠습니까? 나는이 오류와 붙어 :

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

나는 이것을 다음과 같이 사용한다.

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

너무 늦은 시간인지는 모르겠지만 (건설적인) 피드백을 주고 싶었습니다.

나는 React-DnD가 이해하기 (그리고 구현하기) 다소 어렵다는 것을 알았다. 움직이는 부품이 많고 설정이 상당히 복잡합니다. 나는 좀 더 "플러그 앤 플레이"가 되기를 바랐다. 그리고 아마도 이것은 많은 다른 것들을 시도하기 때문일 것입니다(대상 드래그/드롭, 목록 재정렬 등). 그러나 나는 기본적으로 각 항목에 위/아래 버튼을 배치하고 그런 식으로 재정렬하고 반응 플립 이동 과 결합하여 움직임을 애니메이션하는 다른 접근 방식을 취했습니다.

목록 재정렬에만 중점을 두고 작동하도록 _매우_ 간단하게 유지하는 포크를 보고 싶습니다.

React와 Redux를 사용하여 구축된 대규모 독점 제품에 사용하기 시작했습니다. react-dnd를 사용하여 앱의 SVG 요소를 제외한 모든 항목의 끌어서 놓기 측면을 관리합니다. 올바른 추상화 계층만 있습니다. 사실, React 이전의 코드에 대해 매우 유사한 사내 코드가 있으며 마우스 이벤트로 뒷받침됩니다.

react-dnd가 갖고 싶은 한 가지는 마우스 이벤트를 기반으로 하는 백엔드이므로 SVG 요소에서도 작동합니다.

Btw, 흐름 유형에 대한 기존 정의 가 불완전하기 때문에 TypeScript 정의를 기반으로 흐름 유형 정의를 작성하는 중입니다.

와우, 많은 입력! 이것은 통과해야 할 많은 데이터입니다! 이 문제를 마무리하겠습니다. 시간을 내어 의견을 제출해 주신 모든 분들께 감사드립니다!

저는 앞으로 몇 주 안에 일부 문서를 업데이트할 계획이며, 제 생각 중 하나는 React DND를 사용하여 프로젝트와 애플리케이션을 위한 쇼케이스를 만드는 것입니다. 내가 그의 프로젝트를 맡을 때 그 프로젝트를 캡처하기 위해 후속 문제를 만들 것입니다!

💜

@mnquintana 매우 흥미로운 피드백- 당신과 팀은 결국 다른 드래그 앤 드롭 라이브러리를 사용하게 되었는지 아니면 처음부터 완전히 무언가를 구축하게 되었습니까?

@mnquintana 는 이 문제를 극복하기 위해 무엇을 했는지 배우면 정말 굉장할 것입니다. 또는 더 나은 방법으로 dnd 라이브러리를 slack에서 릴리스하도록 하세요!

@epelz 도움이 필요합니다. 대시보드의 카드와 목록의 항목을 끌거나 카드와 목록에 대해 별도의 구성 요소를 사용하여 재사용 가능한 끌어서 놓기 구성 요소를 생성했습니까? 답변해주시면 정말 감사하겠습니다.

나는 이것이 꽤 오래된 토론 스레드라는 것을 알고 있지만 어쨌든 기여하고 싶었습니다. 에버노트
🐘 비즈니스를 위한 새로운 Spaces 제품에 지금 react-dnd를 사용합니다! 우리는 많은 것을 배웠고 사람들이 관심을 가진다면 우리가 배운 것을 공유하려고 할 것입니다 :)

어떤 제품에서 React DnD를 사용하고 있습니까?
https://evernote.com/business

얼마나 유용합니까?
굉장히 유용하다! 가파른 학습 곡선이었지만 우리는 우리가 하고 싶은 대부분의 일을 할 수 있었습니다.

문제가 얼마나 자주 발생하며 얼마나 실망스럽습니까?
처음 시작하는 사람들에게는 큰 장벽이 있고 다루기에 흥미로운 것들이 있다고 생각합니다. 호버 및 드롭 효과와 관련된 일부 버그는 우리를 꽤 혼란스럽게 했지만 더 자세히 살펴보면 그 중 일부는 HTML5의 드래그/드롭 기본 구현의 제한 사항인 것 같습니다(드롭 효과는 특히 적용하려는 커서를 무시하므로 cursor: no-drop 와 같은 것을 활용하세요. 필요한 경우 자신의 백엔드를 구현할 수 있도록 만든 것이 정말 똑똑하고 아직 터치 백엔드를 실험해 보지 않았습니다.

권한을 연결하는 흥미로운 시간을 가졌습니다. 메모를 위한 끌어서 놓기에는 무언가를 이동 및/또는 놓을 수 있는지 여부를 알기 위해 많은 것이 필요합니다. 또한 CustomDragLayer에서 드롭할 위치를 찾지 못한 경우 기본 DOM 요소에 대한 기본 페이드 아웃 드래그백을 다시 구현해야 함을 발견했습니다(이는 우리가 기여할 수 있는 예일 수 있음).

어떤 기능에 관심이 있습니까?
우리는 여러 끌어서 놓기를 구현하려고 하며 우리가 아는 한 React-Dnd를 사용하여 이를 수행할 수 있는 깨끗한 방법이 없는 것 같습니다. 하지만 더 자세히 살펴보고 있습니다. 더 깊이 파고들면 더 많은 것을 공유할 것입니다.

@augbog 시도했는지 확실하지 않지만 문제 #14의 첫 번째 게시물에서 gaeron의 구현을 살펴보고 사용자 지정 드래그 레이어를 사용하는 방법을 살펴보았습니까?

어떤 면에서 이 시나리오는 이미 가능합니다. 소비자는 선택한 요소를 수동으로 추적하고 dragPreview를 일종의 일반 자리 표시자 이미지로 설정하고 여러 요소의 삭제(비즈니스 로직에 관한 한)에 적절하게 반응할 수 있습니다.

https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html

@JM-Mendez 감사합니다 예, 우리는 그것을 보았고 여러 구성 요소가 드래그되고 있음을 인식하는 것과 관련된 후속 의견에 대해 우려했지만 다시 읽은 후에 실제로 우리에게 영향을 미치지 않을 수 있으므로 여전히 조사 중입니다 :) 감사합니다. 그 외침을 위해!

교차 iframe DnD 또는 상위 창에서 하위 iframe 드래그 가능성에 대한 백엔드가 여전히 없습니다. @gaearon 몇 스레드에서 이 문제에 대한 귀하의 의견을 보았습니다. 이것이 제가 내 프로젝트에 순수 js 솔루션을 사용해야 했던 유일한 이유라고 말하고 싶습니다.

(편집) 이것은 드래그 앤 드롭 페이지 빌더를 구축하려는 모든 사람에게 정말 유용한 기능이라고 생각합니다.