Easy-Micro


LOGICIEL Edge Animate
Biblio JQuery

Exemple d'utilisation d'une bibliothèque JQuery

Cet exemple qui permet de déplacer un symbole à la souris (un cliquer / Glisser ou Drag and Drop) nécessite la bibliothèque JQuery 'jquery-ui.custom.min.js' qui doit être téléchargée à la racine de votre projet Edge Animate.

Pour cet exemple, sur la scène dessinez un carré avec un rond à l'interieure.
Dans la fenêtre code, cliquez sur le menu Stage / Evènement / compositionReady et coller le code surligné ci-dessous :

Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

// Chargement de la bibliothèque JQuery
yepnope(
{
nope:[
'jquery-ui.custom.min.js'
],
complete: init
});

function init(){
// applique la bibliothèque JQuery UI draggable au symbol rond qui est dans le carré
sym.getSymbol('carre').$('rond').draggable({

// ici, les contraintes éventuelles...

start: function(e){},
drag: function(e,ui){
}
});


}

Faîtes Ctrl + Entrée pour visualiser le résultat dans votre navigateur. Votre rond doit être déplacable à la souris

Contraintes

On pourra rajouter des contraintes dans la fonction init.
Pour cela dessinez un carré et mettez le rond dans le carré. Attention de ne pas supprimer la virgule !

Contrainte de mouvement en x
axis: "x",

Changement d'état du curseur
cursor: "crosshair",

Opacité
opacity: 0.35 ,

Contrainte de déplacement via scène (si pas d'autre symbole)
containment: "parent" ,

Contrainte via coordonnées[ x1, y1, x2, y2 ]
containment: [50, 0, 100, 0],

Pour aller plus loin...


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Jeudi 20 juin 2019 - Semaine 25 - Saint Silvère (Demain: Saint Rodolphe)
Aujourd'hui, c'est l'anniversaire de Nicole Kidman (1967-52 ans), actrice australienne et américaine.
Haut de page Easy-Micro