React-dnd: Pergunta: Como tornar os cantos quadrados transparentes ao arrastar um elemento de canto arredondado?

Você está usando um CustomDragLayer para DragPreview? Cantos quadrados aparecem
junto com os mais redondos?

Uma captura de tela deve ajudar a ver o que está acontecendo.

Na quarta-feira, 7 de junho de 2017 às 00:53 nottoseethesun [email protected] escreveu:

Eu tenho um elemento arrastável com cantos arredondados e, quando é arrastado,
os cantos quadrados do elemento aparecem em uma cor cinza claro, diferente
da cor de fundo atribuída ao elemento.

Eu gostaria que isso fosse embora, então apenas o elemento com seus cantos arredondados
Aparece.

Existe algo que pode ser feito para desligar isso? Como com um fantasma
imagem que pode estar sendo aplicada?

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/react-dnd/react-dnd/issues/788 ou silencie a conversa
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

Cumprimentos,
Gagan

Obrigado - não usando CustomDragLayer ; tudo é claro.

Na captura de tela, infelizmente não é possível, mas posso descrever melhor: O draggable é um div quadrado com cerca de uma polegada de cada lado, com cantos arredondados (raio de borda de 10px). O arrastável, quando arrastado parece normal em todos os aspectos (ainda tem seus cantos arredondados e cor adequada), exceto por uma coisa: cada um dos quatro cantos não arredondados aparece também, como se não houvesse arredondamento de raio de borda no elemento, exceto que a cor da parte não arredondada é a do elemento pai do arrastável (o elemento pai de onde foi arrastado). Portanto, cada canto arredondado é infelizmente acompanhado, apenas no navegador Chrome (não no Firefox ou Safari), por um pequeno "chapéu" que é o resto da área da div, como seria sem os cantos arredondados.

É quase como se o Chrome estivesse capturando o div e mantendo-o na memória. Anteriormente, tive um problema com endDrag e quando cliquei fora do navegador da web na área de trabalho, pude ver o arrastável exatamente como descrito.

Tentei definir WebkitTapHighlightColor (formato do identificador React) para transparent , mas isso não resolveu.

Isso é estranho. Se você não estiver usando um CustomPreview, então exatamente o mesmo
coisa renderizada antes de começar a arrastar deve ser a visualização (como iremos
dependendo do instantâneo do navegador do elemento)

Você poderia verificar se está fazendo algo mais do que o descrito em
este exemplo -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ?

Se você clonar este repo e adicionar um borderRadius a este exemplo, verá
está funcionando perfeitamente bem!

Na quarta-feira, 7 de junho de 2017 às 09:19 nottoseethesun [email protected] escreveu:

Obrigado - não usando CustomDragLayer; tudo é claro.

Na captura de tela, infelizmente não é possível, mas posso descrever
melhor: o draggable é um div quadrado com cerca de 2,5 cm de cada lado, com
cantos arredondados (raio da borda 10px). O arrastável, quando arrastado parece
normal em todos os aspectos (ainda tem seus cantos arredondados e cor adequada)
exceto por uma coisa: cada um dos quatro cantos não arredondados aparece como
bem, como fariam se não houvesse arredondamento de raio de borda no elemento,
exceto que a cor da parte não arredondada é a do pai
elemento do arrastável (o elemento pai de onde foi arrastado). Então
cada canto arredondado é infelizmente acompanhado, apenas no navegador Chrome (não
Firefox ou Safari), com um pequeno "chapéu" que é o resto da superfície
área do div como seria sem os cantos arredondados.

É quase como se o Chrome estivesse capturando o div e segurando-o
memória. Anteriormente, tive um problema com o endDrag e quando
Cliquei fora do navegador da web na área de trabalho e pude ver o
arrastável conforme descrito.

-
Você está recebendo isso porque comentou.

Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

Cumprimentos,
Gagan

Obrigado - experimentei border-radius naquele exemplo e, de fato, você está correto. No entanto, parece correto porque toda a área de trabalho tem a mesma cor de fundo. Depois que uma imagem fantasma nativa de um elemento html no Chrome é arrastada para uma cor de fundo diferente, esses cantos aparecem. No meu caso, eu tenho essa situação. Pode ser contornado com sucesso especificando uma imagem fantasma.

Encontrei o mesmo problema. Por fim, consegui corrigi-lo adicionando transform: 'translate(0, 0)' ao nó que eu queria como minha visualização de arrastar. Consegui alguns insights nesta página: https://kryogenix.org/code/browser/custom-drag-image.html , pois mostra exemplos onde os cantos estão lá e para onde eles sumiram.

@douweknook obrigado por isso. Encontrar uma solução levou muito tempo.

@douweknook solução incrível!

Uma implementação simples de css seria semelhante a:

    .sortable-chosen {
        transform: translate(0, 0);
    }

Eu encadearia o .sortable-escolhido à sua classe de elemento classificável para garantir que o estilo não seja aplicado globalmente. Por exemplo, se sua classe de elemento classificável for "item", use .item.sortable-choice em vez disso!

@douweknook YAY ....... obrigado, ele resolveu o problema mesmo em javaScript puro para você

@douweknook Você é um cavalheiro e um estudioso. Isso funcionou para corrigir o problema do raio da borda, mas ainda corta a sombra da caixa. Nota: isso funciona corretamente no Firefox.

Criei uma edição separada para isso, para todos os interessados. https://github.com/react-dnd/react-dnd/issues/2762