React-dnd: Quem usa React DnD?

• Projeto: https://github.com/WikiEducationFoundation/WikiEduDashboard
• Utilidade: Muito
• Problemas: As animações dirigidas pelo estado eram a parte mais difícil. Acabei com uma combinação de grupos de transição react-motion e react css. Então eu tive que gerenciar estado extra para coisas que estavam no meio da animação para evitar que fossem alvos de queda durante a animação. Acabei usando https://github.com/yahoo/react-dnd-touch-backend , que tinha seus próprios problemas (texto sendo selecionado durante o arrasto), mas era animações _durante_ mais controláveis. Eu provavelmente gastei cerca de 4 dias úteis nesse recurso e fiz as animações certas, o que provavelmente levaria muito menos tempo em um aplicativo sem reação.

_- Em quais produtos você está usando React DnD?_

Estou usando em vários aplicativos (quadro Kanban, aplicativos de linha de negócios)

_- Quão útil você acha?_

Antes do React DnD, eu tentei todas as soluções de DnD que pude encontrar, tanto react como baseadas em jquery, e o React DnD saiu milhas à frente.

_- Com que frequência você tem problemas com isso e quão frustrantes eles são?_

Desde 1.0, não encontrei nenhum problema. Vale a pena notar que estou suportando apenas navegadores modernos em meus produtos.

_- Com quais recursos você se importa?_

Estou usando todos os recursos, em diferentes combinações em diferentes áreas.

_- Você pode anexar algumas capturas de tela do seu produto?_

Acabei de integrá-lo ontem com um projeto privado (não posso dar telas agora, desculpe), e achei a documentação existente excelente. A abordagem é limpa, fácil de entender, simples de aumentar e, em geral, amigável.

Eu realmente não encontrei nenhum problema com o kit, honestamente. Eu acho que sua simplicidade é realmente o maior recurso, além de encorajar as pessoas que o usam a seguir as melhores práticas, como HOCs.

Em quais produtos você está usando o React DnD?

Nós o usamos em nosso novo console da Web no Treasure Data. Eu também usei para projetos pessoais.

Quão útil você acha isso?

Muito útil. É facilmente a melhor biblioteca de arrastar e soltar que usei. Estou muito confiante de que ele pode ser usado para implementar interações sofisticadas de arrastar e soltar com facilidade.

Com que frequência você tem problemas com isso e quão frustrantes eles são?

Toda vez que uso a biblioteca, demoro um pouco para lembrar como tudo se encaixa: para onde vai cada parte e o que ela faz. Isso acontece mesmo depois de ter usado várias vezes.

Talvez ter uma visualização para mostrar todas as partes facilitaria a lembrança.

No geral, parece que a biblioteca faz tudo o que preciso.

Com quais recursos você se importa?

Testabilidade! Minhas experiências anteriores com arrastar e soltar foram bastante ruins, e ninguém testou seu código relacionado a arrastar e soltar.

Não fiz nenhum tipo de suporte móvel, mas não sei como segmentar tanto o desktop quanto o celular.

Eu vi react-dnd-touch-backend , mas não sei como misturar os dois.

Você pode anexar algumas capturas de tela do seu produto?

https://gfycat.com/ScientificEvilAmericanbadger

Isso é basicamente apenas eu brincando. react-dnd torna trivial implementar a zona de lançamento de arquivos.

Em quais produtos você está usando o React DnD?

codecks.io ainda em desenvolvimento, mas próximo do acesso antecipado

Quão útil você acha isso?

Bastante. Normalizar o comportamento do navegador e oferecer uma abordagem de reação ao dnd torna esta biblioteca um acéfalo para mim

Com que frequência você tem problemas com isso e quão frustrantes eles são?

A documentação é ótima, mas ao começar a trabalhar com ela, encontrei problemas surpreendentes em que não funcionava sem mensagens de erro, não conseguia reproduzi-la de maneira confiável, mas provavelmente tinha a ver com alvos de arrasto de altura zero.

Com quais recursos você se importa?

Normalização do navegador, suporte para interações de toque

Você pode anexar algumas capturas de tela do seu produto?

https://gfycat.com/CleanLegitimateAracari

Eu usei o React DnD em meu trabalho de doutorado em um mecanismo de busca de arquivos de imagens médicas. Ele me permite arrastar os resultados da pesquisa para se tornar parte da consulta (produzindo imagens semelhantes). Se não houvesse uma biblioteca como essa, eu teria que mexer com a API HTML5 e garantir que ela funcionasse bem ao lado do React. Qualquer coisa que me permita focar em assuntos mais importantes é ouro!

Não tive problemas sérios, mas a transição de 0.x para 1.x foi muito confusa e um bom exemplo onde as tags dist não foram usadas corretamente (1.0.0-rc foi lançado como latest sem atualização documentação). Isso é tudo água debaixo da ponte, de qualquer maneira. :)

1.0.0-rc foi lançado como mais recente sem documentação atualizada

Sim, isso foi antes de eu aprender como funcionam as dist-tags. :alegria:

Em quais produtos você está usando o React DnD?

Usando-o para um projeto de cliente que tem muita interação de arrastar e soltar. Alguns dos componentes notáveis ​​são:

• Uma visualização em árvore onde você pode classificar e aninhar nós
• Uma visualização de lista/cartão semelhante ao Trello, suporta apenas classificação.

É também uma ferramenta de colaboração para que a maioria das atualizações de interface sejam despachadas para um servidor de soquete.

Quão útil você acha isso?

Muito útil, é muito fácil separar a lógica de arrastar do seu componente e testá-la individualmente.

Com que frequência você tem problemas com isso e quão frustrantes eles são?

Enfrentamos muitos problemas com a visualização em árvore que suporta aninhamento e classificação,

Um dos maiores problemas que enfrentamos foi implementar a visualização em árvore que suporta aninhamento e classificação.

Temos diferentes tipos de nós (pastas, listas). Um usuário pode soltar algo em uma pasta que fará com que seja aninhado ou classificá-lo abaixo ou acima de outro nó. Essa interação vem com muita cintilação, algum comportamento de bugs e, ocasionalmente, uma diminuição no desempenho. Veja este vídeo: http://s.2to1.be/fAtX ,

A forma como funciona é a seguinte:

1. O usuário começa a arrastar um nó, o nó permanece em sua posição
2. O usuário passa o mouse sobre um nó -> exibe um indicador da nova posição, a posição deste é despachada com uma ação redux. (toda a árvore faz parte do estado do aplicativo).
3. O usuário finaliza o arrasto que despacha uma ação que persiste a nova posição do nó no servidor e a transmite para todos os clientes socket conectados.

Atualmente, usamos alguma matemática (uma variação do exemplo classificável neste repositório) para calcular se um nó está ou não sobre ou abaixo/acima de uma pasta. Inicialmente eu tentei fazer o componente Folder um DropTarget mas isso não funcionou porque então eu não consegui classificar os outros Node DropTarget

Com quais recursos você se importa?

• Testabilidade
• Desligando back-ends
• Conectando-se a eventos
• Suporte ao navegador

Você pode anexar algumas capturas de tela do seu produto?

Veja o vídeo acima

Acabei de adicionar react-dnd na semana passada a um aplicativo da web educacional (ainda a ser lançado). É maravilhoso! Muito obrigado pelo seu trabalho!

A maior vitória da IMO é que o react-dnd fornece o nível certo de abstração para gerenciar a funcionalidade DnD em todo o aplicativo.

Além de ser capaz de abandonar a combinação estranha de componentes de arrasto isolados e de tamanho único (classificáveis, etc.), consegui adicionar algumas funcionalidades baseadas em arrasto em questão de horas que eu havia descartado anteriormente como muito complicadas valer a pena (por exemplo, arrastar um cartão para reclassificar dentro de sua lista OU em um ícone de lista de usuários para mostrar uma lista de usuários e soltá-lo no usuário apropriado).

O único problema que encontrei até agora foi no backend de toque, mas consegui fazer um hack rápido para avançar e alguém comentou que está trabalhando em uma solicitação de pull mais geral.

O principal recurso com o qual me importo, dada a API já maravilhosa, é o suporte ao toque sólido.

Falando pessoalmente do motivo pelo qual não faço pull requests para projetos de código aberto (até agora, pelo menos)... sou designer. Embora eu use essa ferramenta, por exemplo, minha cabeça está naturalmente pensando em tipos muito diferentes de problemas. Além de simplesmente não ser bom em resolver problemas que surgem em bibliotecas como essa, realmente não é o tipo de trabalho que costumo fazer e não "confiaria" na minha solução. Eu sei que há uma certa quantidade de egoísmo aqui, mas imagino que há mais do que alguns designers que também codificam no desenvolvimento front-end que agem dessa maneira. Sou muito grato por pessoas como você que estão dispostas a ajudar designers como eu com ferramentas que aproximam as complexidades do desenvolvimento de aplicativos com as complexidades do design do produto, para que a movimentação entre os domínios seja menos chocante.

FYI, estou usando react-dnd em combinação com react-flip-move para animar mudanças de layout. Faz apenas alguns dias, mas eles parecem combinar muito bem.

@arstin

Isso me fez ganhar o dia. :coração:

_Em quais produtos você está usando React DnD?_
Produto ainda está em sigilo.

_Quão útil você acha isso?_
Muito útil, temos muitos tipos de arrastar e soltar. Manter a lógica DnD dentro dos componentes ajudou nossos cérebros a gerenciar toda a complexidade.

_Com que frequência você tem problemas com isso e quão frustrantes eles são?_
Temos alguns problemas com o desempenho devido ao grande volume de metas de queda que registramos. Caso contrário, funciona muito bem!

_Com quais recursos você se importa?_
Desempenho e compatibilidade com SVG.

Você pode anexar algumas capturas de tela do seu produto?
Não na íntegra, mas isso lhe dará uma ideia do problema que estamos tentando resolver com o React-DnD.

O aplicativo funciona como um editor de mapas de jogos de estratégia. Você pode arrastar e soltar novos itens no mapa com base em várias regras e também mover itens pelo mapa. Não estamos construindo um jogo online, mas usando algumas das ideias para resolver outros problemas de mapeamento (novamente, ainda não posso mencionar).

Muito, muito obrigado por uma grande biblioteca!

Este é um salva-vidas se você estiver usando react e tiver que fazer coisas dnd. Ótimo trabalho!

Eu uso React DND em nosso software de gerenciamento de transporte . até agora não tive nenhum problema.

o usuário arrasta as paradas de entrega e as vê diretamente em um mapa com as distâncias calculadas.

Em quais produtos você está usando o React DnD?

CMS baseado em bloco de arrastar e soltar (mais uma versão beta interna, lançada para um cliente em abril)

Quão útil você acha isso?

Imensamente. Embora a API não seja _exatamente_ tão direta quanto alguns outros componentes de terceiros, é super poderosa e realmente permite que você faça o que precisar.

Com que frequência você tem problemas com isso e quão frustrantes eles são?

Raramente e não muito frustrante.

Com quais recursos você se importa?

Estabilidade e proteção contra balas em vários navegadores.

Você pode anexar algumas capturas de tela do seu produto?

Em quais produtos você está usando o React DnD?

Usamos o React DnD no aplicativo web Asana , para todos os lugares onde usamos o recurso de arrastar e soltar. Observe que, atualmente, estamos reescrevendo nosso aplicativo de nossa estrutura interna Luna para React e estamos usando React DnD durante a reescrita em todos os lugares onde usamos arrastar e soltar.

Quão útil você acha isso?

Nós achamos muito útil. A API é fácil de trabalhar e nos permite ter uma separação clara de interesses mantendo o arrastar e soltar contido em alguns componentes.

Com que frequência você tem problemas com isso e quão frustrantes eles são?

Além do ramp-up inicial, não costumamos ter problemas com isso. Usamos React DnD com TypeScript, e acho que escrever as definições de tipo reduziu o período de aceleração para nós (já que tivemos que explorar toda a API no processo). Agora, nossos problemas geralmente são em torno de testes (por exemplo, limpeza entre testes, ajudantes internos para trabalhar com os componentes decorados com dnd e assim por diante). Isso às vezes é frustrante, mas menos agora que temos alguns componentes de uso geral para usar ou componentes de exemplo para basear futuros.

Com quais recursos você se importa?

Desempenho, separação de interesses, testabilidade

Você pode anexar algumas capturas de tela do seu produto?

@epelz Você provavelmente deveria ter a asana para patrociná-lo, caso contrário o projeto vai desacelerar

ou https://github.com/Asana ou https://github.com/FogCreek , que fazem o Trello que def usa react-dnd, podem ser grandes patrocinadores.

@gaearon melhor ainda ter o facebook patrocinando

Em quais produtos você está usando o React DnD?

A próxima geração da nossa interface do usuário.

Quão útil você acha isso?

Extremamente! Eu gosto dos documentos, mas poderia usar mais exemplos do mundo real.

Com que frequência você tem problemas com isso e quão frustrantes eles são?

Acabei de encontrar um problema ao decorar um componente com DragSource que está impedindo que o método componentWillUpdate seja executado quando as props são alteradas. Super frustrante, então acho que devo registrar um bug. Eu estou supondo que sou eu e não você embora. ;)

Com quais recursos você se importa?

Desempenho, estabilidade e suporte ao toque.

Você pode anexar algumas capturas de tela do seu produto?

Ainda não, receio, mas acho que listas com reordenação e arrastando coisas para elas de novas listas. Bastante simples em comparação com os outros exemplos aqui.

Em quais produtos você está usando o React DnD?

Nós da @teleport usamos React DnD em nosso produto Zen (moving checklist) para reordenar e categorizar as tarefas.

Além disso, acabamos de construir um componente reutilizável de visualização em árvore react-dnd-treeview com suporte a DnD implementado usando React DnD para uso em um projeto atualmente interno. Usamos o react-ui-tree no início, mas não conseguimos acertar o UX, e tivemos uma experiência positiva com o React DnD, então implementamos o nosso. O componente está em estágios iniciais, então ainda não há documentação, CI, etc., mas qualquer feedback será bem-vindo!

Quão útil você acha isso?

Embora tenha levado algum tempo para entender o modelo, o design é realmente limpo e decidimos usá-lo em todos os lugares em que precisamos de DnD. Então, muito útil.

Com que frequência você tem problemas com isso e quão frustrantes eles são?

Até agora tivemos 2 problemas:

• acertando o UX de arrastar com back-end de toque (incluindo desempenho)
• inicialmente, tentei implementar a lógica da área de lançamento em JS, mas fiquei preso por não conseguir obter as coordenadas corretas relativas ao alvo (para determinar se deveria cair acima ou abaixo do alvo) do React DnD, eventualmente decidi criar elementos DOM sobrepostos separados como os alvos de queda.

Com quais recursos você se importa?

Desempenho, ocultando as peculiaridades dos navegadores/plataformas subjacentes.

Você pode anexar algumas capturas de tela do seu produto?

Teletransporte Zen:

react-dnd-treeview:

Em quais produtos você está usando o React DnD?
Discord - https://discordapp.com - Um bate-papo por voz e texto para jogadores

Quão útil você acha isso?
Muito!

Com que frequência você tem problemas com isso e quão frustrantes eles são?
Raramente, 5/10 frustrante.

Com quais recursos você se importa?
Toda a funcionalidade atual.

Quase usamos react-dnd para o cliente de desktop Slack , mas infelizmente encontramos duas limitações que acabaram sendo um problema:

1. Não é possível personalizar a lógica de arrasto (ou seja, a lógica que calcula o estado de arrasto, como quando um arrasto está em andamento).
   
   
   
   • É super fácil mudar os componentes em resposta à mudança de adereços injetados do estado de arrastar. Também é bastante simples personalizar a visualização de arrastar com um componente React personalizado. Mas, infelizmente, os dados que você anexa à operação de arrastar só podem ser anexados e seguir o cursor. Isso impede uma experiência do usuário como temos atualmente com nossa barra lateral, onde você pode arrastar ícones de equipe para reordená-los, e esses arrastos são restritos apenas ao eixo y. Com react-dnd, você pode facilmente restringir uma visualização de arrastar a um eixo, mas é impossível restringir os dados anexados ao cursor enquanto você arrasta. Isso significa que, se você mover o cursor para longe da barra lateral horizontalmente, mas o cursor ainda estiver verticalmente "sobre" um destino de soltar, o react-dnd não permitirá que o destino de soltar responda. (veja o GIF abaixo para o comportamento que temos atualmente sem react-dnd 👇 )
     
     
   
   
2. Usar uma camada de arrastar personalizada bloqueia o loop de renderização React normal se você estiver fazendo coisas em hover . Como você precisa criar um componente React extra se quiser uma camada de arrastar personalizada, e essa camada de arrastar funciona alterando sua posição em resposta a props alterações dos monitores dnd, render() acaba ficando chamado _muito_. Isso é apenas um problema se você estiver planejando renderizar novamente quaisquer outros componentes (provavelmente outros destinos de soltar) em hover enquanto arrasta seu DragSource. Conseguimos mitigar um pouco isso alterando o estado em hover forma assíncrona e retornando no início do hover se o destino de queda não tivesse mudado, mas ainda havia um atraso perceptível ao alterar os destinos de queda ao passar o mouse.

Espero que esse feedback seja útil! Eu gostei de trabalhar com o react-dnd enquanto procurava possivelmente usá-lo no aplicativo Slack, e adoraria vê-lo superar essas limitações, se possível.

Em quais produtos você está usando o React DnD?

Nós o usamos no tylio , uma nova maneira de criar páginas da web. O React-dnd está na frente e no centro da página onde você carrega seu conteúdo.

Quão útil você acha isso?

Muito útil; É um pouco difícil de entender no início, pois você precisa entender todas as partes móveis de uma só vez, mas uma vez que ele clica, você está pronto para ir.

Com que frequência você tem problemas com isso e quão frustrantes eles são?

Nosso caso é bastante complexo, pois estamos reordenando e movendo itens de tamanhos diferentes, e não queremos que eles mudem de posição. Eu tive alguns problemas com isso, mas acho que era mais como usá-lo do que a própria biblioteca.

Com quais recursos você se importa?

Praticamente todos eles! Usamos diferentes tipos de fontes de arrasto e destinos de soltar, arquivos nativos / urls / texto, HTML5 e backend de toque com camada de arrasto personalizada.

Você pode anexar algumas capturas de tela do seu produto?

Se alguém usá-lo com Typescript, você poderia fornecer um exemplo básico? Fiquei com este erro:

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

Eu uso desta forma:

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

Eu não sei se é tarde demais para entrar em contato, mas eu queria dar algum feedback (espero construtivo).

Achei o React-DnD um pouco difícil de entender (e implementar). Tem muitas partes móveis e a configuração é bastante complicada. Eu esperava ter algo mais "plug-n-play". E talvez seja porque ele tenta ser muitas coisas diferentes (alvos de arrastar/soltar, reordenar listas, etc). Mas acabei adotando uma abordagem diferente, que era basicamente apenas colocar botões para cima/baixo em cada item e reordenar dessa maneira, combinado com reagir-flip-move para animar o movimento.

Eu adoraria ver um fork disso que se concentrasse apenas na reordenação de listas e mantivesse _super_ simples para fazê-lo funcionar.

Estamos começando a usá-lo em um produto proprietário de larga escala que é construído usando React e Redux. Usamos react-dnd para gerenciar os aspectos de arrastar e soltar de todas as coisas, exceto para elementos SVG no aplicativo. Ele tem apenas a camada de abstração certa. Na verdade, temos algo muito semelhante internamente para código que antecede o React e é apoiado por eventos de mouse.

A única coisa que eu desejo que o react-dnd tenha é um backend baseado em eventos de mouse para que funcione também para elementos SVG.

Aliás, estou no processo de escrever uma definição de tipo de fluxo para ele com base em sua definição de TypeScript , pois a existente no tipo de fluxo está incompleta.

Uau, muita entrada! Isso é um monte de dados para passar! Vou encerrar este assunto. Obrigado a todos por tomar o tempo para enviar comentários!

Estou planejando atualizar parte da documentação nas próximas semanas, e um dos meus pensamentos é criar uma vitrine para projetos e aplicativos usando React DND. Vou criar um problema de acompanhamento para capturar esses projetos quando eu conseguir assumir o projeto!

💜

@mnquintana Feedback muito interessante - você e a equipe acabaram usando outra biblioteca de arrastar e soltar ou apenas criaram algo completamente do zero?

@mnquintana seria realmente incrível saber o que você fez para superar isso, ou melhor ainda, liberar o slack de sua biblioteca dnd!

@epelz Preciso de sua ajuda. Você criou um componente de arrastar e soltar reutilizável para arrastar os cartões no painel e os itens na lista ou usando um componente separado para cartões e lista. Eu realmente aprecio se você puder responder.

Eu sei que este é um tópico de discussão bastante antigo, mas queria contribuir de qualquer maneira. Evernote
🐘 usa react-dnd agora mesmo para nosso novo produto Spaces para negócios! Aprendemos muito e podemos tentar compartilhar o que aprendemos se as pessoas estiverem interessadas :)

Em quais produtos você está usando o React DnD?
https://evernote.com/business

Quão útil você acha isso?
Muito útil! Foi uma curva de aprendizado íngreme, mas conseguimos fazer a maior parte do que queremos fazer.

Com que frequência você tem problemas com isso e quão frustrantes eles são?
Eu sinto que existem algumas grandes barreiras para os primeiros jogadores e algumas coisas são interessantes de se lidar. Alguns bugs relacionados aos efeitos de hover e soltar nos deixaram bastante confusos, mas olhando mais para isso, parece que alguns deles são apenas limitações com a implementação nativa de arrastar/soltar do HTML5 (os efeitos de soltar parecem substituir especificamente o cursor que você deseja aplicar para que possamos ' t tirar proveito de coisas como cursor: no-drop . É muito inteligente que você tenha feito isso para que você possa implementar seus próprios back-ends, se necessário, e ainda não nos aventuramos a experimentar o back-end de toque.

Tivemos um momento interessante nos conectando às permissões. Nosso arrastar e soltar para notas requer muitas coisas para saber se podemos mover e/ou soltar algo. Também descobrimos que tivemos que reimplementar o fade-out-drag-back nativo para o elemento DOM principal quando ele não encontrou um lugar para nos soltar em nosso CustomDragLayer (este pode ser um exemplo com o qual podemos contribuir).

Com quais recursos você se importa?
Estamos procurando implementar vários arrastar e soltar e não parece haver uma maneira limpa de fazer isso com o React-Dnd pelo que sabemos? No entanto, estamos olhando mais para isso. Quando mergulharmos mais fundo, compartilharemos mais.

@augbog não tenho certeza se você já tentou, mas você olhou para a implementação de gaeron no primeiro post da edição #14 e usando uma camada de arrastar personalizada?

De certa forma, esse cenário já é possível: os consumidores podem acompanhar manualmente os elementos selecionados, definir dragPreview para algum tipo de placeholder genérico Image e reagir adequadamente à queda de vários elementos (no que diz respeito à lógica de negócios).

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

Obrigado @JM-Mendez, sim, vimos isso e estávamos preocupados com o comentário de acompanhamento sobre ter vários componentes cientes de que estavam sendo arrastados, mas depois de reler, isso pode não nos afetar, então ainda estamos analisando :) Obrigado para a chamada para isso!

Ainda não há back-end para cross iframe DnD ou janela pai para arrastar iframe filho. @gaearon Eu vi seu comentário sobre esse problema em alguns tópicos, gostaria de dizer que essa é a única razão pela qual tive que usar a solução js pura para meu projeto.

(Editar) Eu acho que este é um recurso realmente útil para quem tenta construir o construtor de páginas de arrastar e soltar.