« STIC Discussion:STIC II - exercice 15 (Nestor-Pixel) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 60 : Ligne 60 :
Exemple, quel est le comportement du drag (et de son cercueil) quand il est au dessus de la bonne boîte ? Quand il est au-dessus de la mauvaise ? Sinon, tu veux un effet "retour à la case départ" ou pas, comment, quoi, etc. ? Tout ça, c'est assez simple à réaliser en utilisant les bonnes options.
Exemple, quel est le comportement du drag (et de son cercueil) quand il est au dessus de la bonne boîte ? Quand il est au-dessus de la mauvaise ? Sinon, tu veux un effet "retour à la case départ" ou pas, comment, quoi, etc. ? Tout ça, c'est assez simple à réaliser en utilisant les bonnes options.
J'te guide si tu veux ;)
J'te guide si tu veux ;)
========Re: Re: Re: Re: Script drag-and-drop -- [[Utilisateur:Davidc|Davidc]] 26 avril 2008 à 18:25 (CEST)========
Deja, une piste pour faire simple.
tu crée un div pour chaque cercueil et tu les position: absolute. Reste à déterminer la bonne position sur ton image (top, left: 120px;)
Après, tu créé tes drag avec des options pour atterir correctement dans tes cercueils ou retouner au point de départ (revert:true)

Version du 26 avril 2008 à 18:25

Webrefence -- Sylviane 24 avril 2008 à 17:35 (CEST)

Depuis cette après-midi je n'ai plus aucun accès au site "Webreference", quand je le charge, il affiche une page blanche et ce dans n'importe quel navigateur (FF, IE, Op). Le lien apparaît dans la barre url, avec le favicon mais la page reste désepérement vide avec indiqué en bas "terminé". Or le site n'est pas en carafe, j'ai fait vérifier par d'autres personnes. Est-ce parce que j'ai fait des manipulations autour du js et ça aurait déréglé qq chose ? J'ai réinstallé Firefox, ça n'a rien changé. J'ai revérifié tous mes paramètres. J'ai pas de restrictions de pop up ni de choses comme ça.

Avez-vous une piste ?

Je cherche un script qui me permette de déplacer des images sur une autre image. Quelqu'un a-t-il ça ? Ou pouvez-vous m'indiquer d'autres sites de scripts. J'ai fouillé le web mais je ne trouve que des sites avec scripts pour les menus, des choses comme ça.

Merci

Re: Webrefence -- Daniel K. Schneider 24 avril 2008 à 18:29 (CEST)

Non je ne connais pas de "drag and drop" scripts pour JS. Je vous conseille de fouiller quand-même une fois ma page de liens. Doit y avoir au moins 3 sites qui ont ce genre de code.

http://edutechwiki.unige.ch/en/JavaScript_links#Sites_with_javascript_code

(genre dhtmlgoodies ou hotscripts) http://www.dhtmlgoodies.com/index.html?page=dragDrop

Re: Re: Webrefence -- Sylviane 24 avril 2008 à 22:26 (CEST)

merci beaucoup, j'ai trouvé ça : http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-1.html ça me paraît convenir, pourvu que je sache l'adapter.

Re: Webrefence -- Davidc 25 avril 2008 à 21:35 (CEST)

Refresh d'une page javascript

Concernant les pages vides, il est souvent nécessaire de rafraîchir une page pour voir les modifications apportés au script JS. Mais il ne faut pas oublier que les navigateurs en font parfois trop pour nos besoins. Souvent les .js sont mis en cache !

2 trucs pour rafraîchir une page avec des scripts .js externe :

  1. Refresh avec ctrl-f5
  2. Dans Firefox, clik sur Outils/Effacer mes traces => cocher que le cache

Il existe des méthodes plus compliqués aussi pour le développement, du genre écrire :

<script type="text/javascript" src="monScript.js?<?php echo time();?>"></script>

afin que le navigateur recherche toujours un script qu'il n'a pas en cache..

Script drag-and-drop

Mon favori perso, c'est la librairie prototype.js. À partir de cette librairie, il y a la librairie Scriptaculous qui rajoute plein de fonctionnalités comme le drag-and-drop made easy. Exemple de création d'un drag facile :

new Draggable('id_de_l'objet_a_rendre_draggable');

Ces 2 librairies ont une très bonne documentation online et des communautés très actives ==> d'où des réponses complètes et rapides à tes questions..

Re: Script drag-and-drop -- Sylviane 25 avril 2008 à 23:58 (CEST)

wââ il y a des trucs bling-bling marrants (bling bling est un mot à la mode en ce moment en France ;-)

Merci David. Mais finalement j'ai abandonné mon idée première car je ne cherchais pas seulement à ce que ce soit drag & drop mais aussi à ce que lorsque l'étiquette était mal placée, elle revienne à sa place initiale. Je n'ai vraiment pas trouvé comment faire, donc je suis partie sur quelque chose de + simple, - de modifs. Par contre pour ma deuxième idée, il faut que je cree un texte particulier et ce n'est pas évident non plus.

Re: Re: Script drag-and-drop -- Sylviane 26 avril 2008 à 08:34 (CEST)

En fait mon idée était simplement de reproduire à l'écran l'exercice que Denise et moi avions fait pour methodo. Là c'est sous forme papier mais à l'écran il aurait suffit de drag and drop les mots et les placer dans les bonnes cases. J'avais compris le principe du script mais j'ai eu trop de difficultés à positionner les boites correctement à partir des scripts trouvés. J'ai donc lâché cette idée. Je pense qu'en y conscacrant + de temps j'y serais arrivée.

=Re: Re: Re: Script drag-and-drop -- Davidc 26 avril 2008 à 18:02 (CEST)=

Et encore, ça n'est qu'une toute petite page démo, les effets possibles sont vraiments presque-infini et quand on se met à les combiner... et à rajouter du ajax par-dessus. :P

C'est d'ailleurs pour ça que j'ai de la difficulté à t'enligner. Il faudrait que tu décrives de façon exhaustive et télégraphique (scénario d'utilisation) ce que tu veux. M'est avis que ça n'est pas si difficile à faire, faut juste s'aiguiller dans la bonne direction.

Exemple, quel est le comportement du drag (et de son cercueil) quand il est au dessus de la bonne boîte ? Quand il est au-dessus de la mauvaise ? Sinon, tu veux un effet "retour à la case départ" ou pas, comment, quoi, etc. ? Tout ça, c'est assez simple à réaliser en utilisant les bonnes options. J'te guide si tu veux ;)

==Re: Re: Re: Re: Script drag-and-drop -- Davidc 26 avril 2008 à 18:25 (CEST)==

Deja, une piste pour faire simple. tu crée un div pour chaque cercueil et tu les position: absolute. Reste à déterminer la bonne position sur ton image (top, left: 120px;) Après, tu créé tes drag avec des options pour atterir correctement dans tes cercueils ou retouner au point de départ (revert:true)