J'essaie de créer des conteneurs div redimensionnables et ils sont également déplaçables.
J'ai utilisé le matériau angulaire Drag and Drop et élément redimensionnable angulaire
Voici une solution de contournement https://stackblitz.com/edit/angular-syurbs? embed = 1 & file = src / polyfills.ts
Mais lorsque j'applique les deux, je peux faire glisser mais je ne peux pas redimensionner.
https://stackblitz.com/edit /angular-41rqyo?file=src%2Fapp%2Fapp.component.html
Comment puis-je réaliser les deux en un?
3 Réponses :
Utilisez la directive cdkDragHandle sur une icône ou un bouton
Voir l'intégralité de l'API ici https://material.angular.io/cdk/ glisser-déposer / api
Je demande comment réaliser un "glisser-déposer" et un "redimensionnable"
Oui, lorsque vous utilisez un gestionnaire pour faire glisser l'élément, vous pourrez le redimensionner. Il n'y a pas d'autre moyen de faire cela dans Angular Material
Un moyen simple de créer un composant angulaire déplaçable et redimensionnable
Vous pouvez réaliser vous-même le composant déplaçable et redimensionnable sans matériau angulaire. Vous devez le faire en trois étapes.
L'étape (2) nécessite de calculer le mouvement de votre souris et d'ajouter le même nombre de mouvements à la position supérieure et gauche de votre div.
À l'étape (3), vous devrez calculer la position des limites supérieure, droite, inférieure et gauche du conteneur extérieur.
Pour obtenir la position de l'élément div, vous devez utiliser l'API Web - Element.getBoundingClientRect ()
Pour obtenir les positions de la souris, vous devez ajouter un écouteur de déplacement de la souris à la fenêtre et un écouteur de souris à l'élément div lui-même.
J'ai écrit un article sur la façon de réaliser ces trois étapes avec des explications et des graphiques supplémentaires. Vous pouvez jeter un œil si vous ne savez toujours pas comment y parvenir.
avez-vous le référentiel? Il y a des parties que je ne comprends pas
Bonjour @RicardoSanchezSantos, oui, veuillez trouver le code ici: github.com/theideasaler/angular-resizable- déplaçable
Vous pouvez ajouter un élément hitbox à l'intérieur de votre draggable, il doit être légèrement plus petit et parfaitement centré à l'intérieur de votre élément cible.
La zone bleue est l'élément hitbox.
Maintenant, appliquez un événement mouseenter et mouseleave sur l'élément hitbox respectivement, et désactivez le glissement chaque fois que votre souris n'est pas au-dessus de l'élément hitbox.