J'utilise React DnD pour gérer le glisser-déposer dans une application React. J'utilise le touch backend. Dans cette implémentation, j'utilise un aperçu de glissement personnalisé. Tout en faisant glisser, je cache l'élément qui est "en train d'être déplacé" en animant sa hauteur max à 0. L'aperçu de glisser personnalisé montre que l'utilisateur fait glisser. Si l'utilisateur dépose l'élément dans une zone non autorisée, l'élément "en train d'être déplacé" revient à sa hauteur d'origine. C'est bon. Lorsque l'élément est déposé, j'envoie une action de redux qui réorganise la liste des éléments et place l'élément précédemment déplacé dans son nouvel emplacement.Comment cacher un élément en utilisant React DnD avec un aperçu personnalisé?
Cependant, il y a un moment où l'élément déplacé clignote à son emplacement actuel avant que le DOM ne mette à jour et n'anime l'élément dans son nouvel emplacement.
Les animations de hauteur maximale sont contrôlées par les classes CSS qui sont ajoutées et supprimées lorsque isDragging est true. J'ai parcouru les documents et les exemples de React DnD (qui sont généralement très complets) et j'ai examiné d'autres projets open-source qui ont utilisé React DnD, mais qui ne semblent pas localiser la solution. Je suppose qu'il me manque quelque chose de simple comme un accessoire que je peux transmettre. Essentiellement, je voudrais isDragging pour rester true jusqu'à ce que l'action de baisse soit complète ou être en mesure de mettre à jour un accessoire dans la méthode endDrag sur la cible déplaçable ou la fonction drop sur la cible de gouttelettes.
Je pourrais utiliser vanilla javascript pour mettre à jour le classList à l'intérieur de la méthode endDrag, mais préférerait utiliser des outils React si possible.
Est-ce que quelqu'un a rencontré ce problème?