Glisser-Déplacer

Bonsoir à toutes et à tous,

J'ai cherché su Google ... j'ai trouvé des trucs super sympa ... mais
d'une complexité innabordable pour moi.

Avez-vous (ou des liens vers) des exemples ou des tutoriels de
glisser-déplacer en Javascript.

Mon but est le suivant :

J'ai un tableau de vignettes à l'écran, je souhaiterais, en cliquant sur
l'une d'elles puis en la déplaçcant et lâchant sur une autre qu'il y ait
échange des deux vignettes concernées.

si toutes les images sortent du même dossier :

<script type="text/javascript">
var mem1 = '', mem2 = '';
function chtechange(quoi) {
if(mem1 != '') mem1 = quoi.src;
if(mem2 != '') quoi.src = mem2;
mem2 = mem1;
}
</script>

<p><img src="truc.jpg" onclick="chtechange(this)">
<p><img src="machin.jpg" onclick="chtechange(this)">
<p><img src="bidule.jpg" onclick="chtechange(this)">

clic sur une image puis clic sur une autre
(pas essayé)

--
Stephane Moriaux et son [moins] vieux Mac

si toutes les images sortent du même dossier :

correctif

<script type="text/javascript">
var mem1 = '', mem2 = '';
function chtechange(quoi) {
mem1 = quoi.src;
if(mem2 != '') quoi.src = mem2;
mem2 = mem1;
}
</script>

--
Stephane Moriaux et son [moins] vieux Mac

Bonsoir à toutes et à tous,

J'ai cherché su Google ... j'ai trouvé des trucs super sympa ... mais
d'une complexité innabordable pour moi.

Avez-vous (ou des liens vers) des exemples ou des tutoriels de
glisser-déplacer en Javascript.

Mon but est le suivant :

J'ai un tableau de vignettes à l'écran, je souhaiterais, en cliquant
sur l'une d'elles puis en la déplaçcant et lâchant sur une autre qu'il
y ait échange des deux vignettes concernées.

si toutes les images sortent du même dossier :

<script type="text/javascript">
var mem1 = '', mem2 = '';
function chtechange(quoi) {
if(mem1 != '') mem1 = quoi.src;
if(mem2 != '') quoi.src = mem2;
mem2 = mem1;
}
</script>

<p><img src="truc.jpg" onclick="chtechange(this)">
<p><img src="machin.jpg" onclick="chtechange(this)">
<p><img src="bidule.jpg" onclick="chtechange(this)">

clic sur une image puis clic sur une autre
(pas essayé)

Merci pour cette réponse. Ce n'est pas franchement du glisser-déplacer,

il y a quelques soubresauts (up/down). J'avais effectivement pensé à une
solution de ce genre.

Je pense que je vais faire avec ; ça me convient.

J'ai un peu modifié le script pour le rendre fonctionnel :

ImgMem = ''; // Image mémorisée
Srce = ''; // Source de l'image

function chtechange(quoi)
{
if (ImgMem == '') // si rien de mémorisé
{
ImgMem = quoi.src; // on mémorise l'image de la source
Srce = quoi; // et la source
}
else // si une image a été mémorisée
{
Srce.src = quoi.src; // image.source = image.destination
quoi.src = ImgMem; // image.destination = image.source
ImgMem = ''; // Réinitialisation
}
}

Cordialement.

Pierre

Merci pour cette réponse. Ce n'est pas franchement du glisser-déplacer,

Si tu veux du glissé-déposé tu as dit toi-même que c'était
trop compliqué comme code.

il y a quelques soubresauts (up/down).

je n'ai aucun soubresaut

J'avais effectivement pensé à une
solution de ce genre.

Je pense que je vais faire avec ; ça me convient.

J'ai un peu modifié le script pour le rendre fonctionnel :

curieux, j'ai fait de même :-)

http://perso.wanadoo.fr/stephane.moriaux/truc/echange_images.htm


Amusement :
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/java/mastermind/
choisir le mode avec images

--
Stephane Moriaux et son [moins] vieux Mac

Merci pour cette réponse. Ce n'est pas franchement du glisser-déplacer,

Si tu veux du glissé-déposé tu as dit toi-même que c'était
trop compliqué comme code.

J'ai dis que "ce que j'avais trouvé me semblait compliqué" et c'est
pourquoi je demandais s'il existait des tuto ou plus simple.

Une fois qu'on a compris ce qu'il faut faire et mettre en oeuvre (pas
que du pur javascript, il me semble), c'est peut-être simple.

il y a quelques soubresauts (up/down).

je n'ai aucun soubresaut

J'ai simplement voulu faire un peu d'humour en disant que :

click = glisser/déplacer avec des hauts et des bas (up/down)

Bon, ben j'ai raté.

En tout cas, merci.

J'avais effectivement pensé à une solution de ce genre.

Je pense que je vais faire avec ; ça me convient.

J'ai un peu modifié le script pour le rendre fonctionnel :

curieux, j'ai fait de même :-)

http://perso.wanadoo.fr/stephane.moriaux/truc/echange_images.htm


Amusement :
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/java/mastermind/
choisir le mode avec images

--> bien, bien

Cordialement.

Pierre.

J'ai dis que "ce que j'avais trouvé me semblait compliqué" et c'est
pourquoi je demandais s'il existait des tuto ou plus simple.

ce n'est pas compliqué mais ce n'est pas simple pour résumer :-)

Une fois qu'on a compris ce qu'il faut faire et mettre en oeuvre (pas
que du pur javascript, il me semble), c'est peut-être simple.

http://www.walterzorn.com/dragdrop/dragdrop_e.htm
et visiter le reste du site

je n'ai aucun soubresaut

J'ai simplement voulu faire un peu d'humour

bientôt çà se fera directement en y pensant

(il est question que tt le monde ait
une puce électronique gréffée dès la naissance.
Pour le moment on doit encore régler le pb
du ventilateur de refroidissement )


--
Stephane Moriaux et son [moins] vieux Mac

J'ai dis que "ce que j'avais trouvé me semblait compliqué" et c'est
pourquoi je demandais s'il existait des tuto ou plus simple.

ce n'est pas compliqué mais ce n'est pas simple pour résumer :-)

Une fois qu'on a compris ce qu'il faut faire et mettre en oeuvre (pas
que du pur javascript, il me semble), c'est peut-être simple.

http://www.walterzorn.com/dragdrop/dragdrop_e.htm
et visiter le reste du site

Super, je vais voir cela avec intérêt.

Merci et bon WE

Pierre

je n'ai aucun soubresaut

J'ai simplement voulu faire un peu d'humour

bientôt çà se fera directement en y pensant

(il est question que tt le monde ait
une puce électronique gréffée dès la naissance.
Pour le moment on doit encore régler le pb
du ventilateur de refroidissement )


Moi, à la naissance, on m'a greffé un gros truc gris dans la tête avec

des tas de circonvolutions ... C'est super, mais ça déconne de temps en
temps ...

http://www.walterzorn.com/dragdrop/dragdrop_e.htm
et visiter le reste du site

Super, je vais voir cela avec intérêt.

Voici du faux-vrai drag n' drop réalisé avec ton script :
http://perso.wanadoo.fr/stephane.moriaux/truc/echange_images_D-D.shtml
marche avec tous mes navigateurs, sauf IE comme de juste :-(



--
Stephane Moriaux et son [moins] vieux Mac

ASM a écrit :

Voici du faux-vrai drag n' drop réalisé avec ton script :
http://perso.wanadoo.fr/stephane.moriaux/truc/echange_images_D-D.shtml
marche avec tous mes navigateurs, sauf IE comme de juste :-(

Ne fonctionne pas avec Firefox 1.02 (Windows).

--
A'tchao

Le Fou
http://www.ffessm-cd84.com/
http://ehiller.club.fr/

ASM a écrit :

Voici du faux-vrai drag n' drop réalisé avec ton script :
http://perso.wanadoo.fr/stephane.moriaux/truc/echange_images_D-D.shtml
marche avec tous mes navigateurs, sauf IE comme de juste :-(

Ne fonctionne pas avec Firefox 1.02 (Windows).

C'était trop beau que ce truc simplissime fonctionne vraiment :-(
(je ne comprends même pas que çà puisse fonctionner)

Chez moi çà passe avec :
FF 1.5
Camino 0.8
Opera 8.01 (Révision 2092)
Safari 1.3.2 (v312.5)

Passe pas avec :
iCab 3.00
IE 5.2.3


--
Stephane Moriaux et son [moins] vieux Mac