Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Moveable : déplacez, déformez, redimmensionner les éléments de votre page Web
à l'aide de cette bibliothèque JavaScript

Le , par vermine

0PARTAGES

7  0 
Moveable est une bibliothèque JavaScript permettant de manipuler les éléments d'une page Web de plusieurs manières.


Voici les actions possibles sur un élément :

  • le déplacer ;
  • le redimensionner en conservant les proportions ;
  • le redimensionner selon un axe uniquement ;
  • lui appliquer une rotation ;
  • le déformer ;
  • le pincer (sur un écran tactile) afin de lui appliquer une action ;
  • lui appliquer une action selon une ligne directrice ;
  • l'inclure dans un groupe d'éléments pour lequel une des opérations ci-dessus peut être appliquée.


En d'autres termes : Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable et Snappable.

De base il supporte le Webkit Safari, les éléments SVG et les transformations 3D.
L'auteur fournit même des composants pour React, Preact, Angular et Vue afin de vous faciliter la tâche.

Site officiel avec les démonstrations.
Documentation.
Téléchargement.

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de pbchadeu
Candidat au Club https://www.developpez.com
Le 21/10/2019 à 0:17
cest super cool mes dure a pratique
0  0 
Avatar de vermine
Responsable Jeux-Concours https://www.developpez.com
Le 21/10/2019 à 7:51
Il faut effectivement découvrir quelle valeur est liée à quelle axe de transformation et comprendre les matrices. Comme toujours, il faut pratiquer pour se sentir à l'aise. Courage !
0  0 
Avatar de hclatomic
Membre régulier https://www.developpez.com
Le 22/10/2019 à 17:42
Whaa ! Sympa ! Merci pour ça.
C'est propre et efficace.

Dommage que je n'ai pas le temps de lire la doc, et donc de m'y mettre. Peut-être si l'occasion se présente ...

En général, en matière de SVG j'ai besoin de faire des dessins simples (line, rect, circle, path, polygon, ...), le plus vite possible (sans avoir à me frapper de doc =;o), et en embarquant le minimum de code possible (donc exit d3js). Alors j'ai créé ma propre lib qui répond à tout ça : hclsvg. Il y a cependant une doc, qui indique que l'utilisation en est totalement élémentaire.

Je bookmark ton site néanmoins car tu fais des trucs que ma lib ne fait pas.

Cordialement
Hervé
0  0 
Avatar de vermine
Responsable Jeux-Concours https://www.developpez.com
Le 23/10/2019 à 7:56
Attention que cet outil ne vient pas de moi. L'auteur est Younkue Choi.
Il serait intéressant de regarder le tiens de plus près.
0  0