begin process at 2012 02 14 09:56:21
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Jeux

 >  QUIZZ AVEC GLISSÉ DÉPOSÉ D'OBJETS COMPATIBLE (DRAG&DROP) .

QUIZZ AVEC GLISSÉ DÉPOSÉ D'OBJETS COMPATIBLE (DRAG&DROP) .


 Information sur la source

Note :
7,67 / 10 - par 3 personnes
7,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Jeux Niveau :Débutant Date de création :18/10/2004 Date de mise à jour :18/02/2005 21:59:11 Vu / téléchargé :6 182 / 684
Auteur : chimelpremier

Ecrire un message privé
Site perso
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Code javascript + DOM1 devrait être supporté par pas mal de butineurs.
http://moncastel.9online.fr/dragdrop

Source

  • <!-- drag&drop d'objets
  • function ctrl(e){ // e pour gecko;
  • fx=ie?db.clientWidth:innerWidth-20 //l fenêtre
  • fy=ie?db.clientHeight:innerHeight //h fenêtre
  • sx=ie?db.scrollLeft:pageXOffset; //scroll h
  • sy=ie?db.scrollTop:pageYOffset; //scroll v
  • px=ie?event.clientX+sx:e.pageX; //curseur x
  • py=ie?event.clientY+sy:e.pageY; //curseur y
  • }
  • function getobjet(e){ //sélection de l'objet sous la souris
  • if (ie) {
  • e=window.event;
  • el = e.srcElement;
  • } else el = e.target;
  • if(!el.tagName)el=el.parentNode // bug NS7, mozilla
  • }
  • function drag(e){
  • getobjet(e);
  • if (el.id.substr(0,2)=="dd" && ob==D){ // si l'objet est déplaçable
  • ob=el; // le capture
  • if(el.parentNode.parentNode.id == "rcpDIV"){ // évite la case vide
  • el.parentNode.style.width = "1.5em";
  • }
  • }
  • return false // necessaire Gecko
  • }
  • function bouge(e){
  • ctrl(e);
  • if(ob != D){
  • with(ob.style){position="absolute";display="inline";
  • left=px+"px";top=py+3+"px";cursor="move"
  • }
  • }
  • return false // necessaire Gecko
  • }
  • function drop(e){ // dépose l'objet
  • getobjet(e);
  • if (el.id.substr(0,2)=="dd")el=el.parentNode; // une case peut contenir plusieurs réponses
  • if ( el.parentNode.id.substr(0,3) == "rcp" ){ // si c'est bien une case réponse
  • tag = el.parentNode.id.substr(3,6); // tag des cases réponse
  • if(el.tagName == tag){
  • el.appendChild(ob); // colle l'objet dans la case sélectionnée
  • el.style.width = "auto"; // nécessaire pour Gecko et opéra dans le quizz2
  • with(ob.style){position="";}
  • ob=D; // annule la sélection
  • verif(); //inscrit le score
  • }
  • }
  • }
  • function verif(){ // vérifie l'emplacement des objets et affiche le score
  • var cases=D.getElementById('rcp'+tag).getElementsByTagName(tag);
  • score=0;ob_present=0;
  • for(var i=0;i<cases.length;i++){
  • if (cases[i].childNodes[1]){
  • ob_present+=1;
  • if (cases[i].childNodes[1].id =="dd"+i) score+=1;
  • }
  • }
  • s=(score>1)?'s':''; //singulier ou pluriel
  • D.getElementById('resultat').innerHTML = score +' bonne'+s+' réponse'+s+' sur '+ob_present;
  • }
  • function initdrag(){
  • D=document;ie=D.all?1:0;op=window.opera?1:0;dtd= D.compatMode=="CSS1Compat"?1:0;ob=D
  • db=ie&!op&&dtd?D.documentElement:D.body //exception IE6 dtd
  • D.onmousedown=drag;D.onmouseup=drop;D.onmousemove=bouge
  • }
  • //--> 
<!-- drag&drop d'objets

function ctrl(e){  // e pour gecko;
fx=ie?db.clientWidth:innerWidth-20   //l fenêtre
fy=ie?db.clientHeight:innerHeight    //h fenêtre
sx=ie?db.scrollLeft:pageXOffset;      //scroll h
sy=ie?db.scrollTop:pageYOffset;       //scroll v
px=ie?event.clientX+sx:e.pageX;      //curseur x
py=ie?event.clientY+sy:e.pageY;      //curseur y
}

function getobjet(e){ //sélection de l'objet sous la souris
if (ie) {
  e=window.event;
  el = e.srcElement;
 } else el = e.target;
if(!el.tagName)el=el.parentNode // bug NS7, mozilla
}

function drag(e){
getobjet(e);
if (el.id.substr(0,2)=="dd" && ob==D){  // si l'objet est déplaçable
  ob=el; // le capture
  if(el.parentNode.parentNode.id == "rcpDIV"){ // évite la case vide
    el.parentNode.style.width = "1.5em";
    }
  }
return false // necessaire Gecko
}

function bouge(e){
ctrl(e);
if(ob != D){
  with(ob.style){position="absolute";display="inline";
    left=px+"px";top=py+3+"px";cursor="move"
    }
  }
return false // necessaire Gecko
}

function drop(e){ // dépose l'objet
getobjet(e);
if (el.id.substr(0,2)=="dd")el=el.parentNode; // une case peut contenir plusieurs réponses
if ( el.parentNode.id.substr(0,3) == "rcp" ){  // si c'est bien une case réponse
  tag = el.parentNode.id.substr(3,6); // tag des cases réponse
  if(el.tagName == tag){
    el.appendChild(ob); // colle l'objet dans la case sélectionnée
    el.style.width = "auto"; // nécessaire pour Gecko et opéra dans le quizz2
    with(ob.style){position="";}
    ob=D; // annule la sélection
    verif(); //inscrit le score
    }
  }
}

function verif(){ // vérifie l'emplacement des objets et affiche le score
var cases=D.getElementById('rcp'+tag).getElementsByTagName(tag);
score=0;ob_present=0;
for(var i=0;i<cases.length;i++){
  if (cases[i].childNodes[1]){
    ob_present+=1;
    if (cases[i].childNodes[1].id =="dd"+i) score+=1; 
    }
  }
  s=(score>1)?'s':''; //singulier ou pluriel
  D.getElementById('resultat').innerHTML = score +' bonne'+s+' réponse'+s+' sur '+ob_present;
}

function initdrag(){
D=document;ie=D.all?1:0;op=window.opera?1:0;dtd= D.compatMode=="CSS1Compat"?1:0;ob=D
db=ie&!op&&dtd?D.documentElement:D.body //exception IE6 dtd
D.onmousedown=drag;D.onmouseup=drop;D.onmousemove=bouge
}
//-->

 Conclusion

J'espère qu'il sera utile à certains
Il reste qqs petits bugs que je compte sur votre aide pour les résoudre:

1 - je n'arrive pas à désactiver la sélection souris sur OPERA

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

18 octobre 2004 14:37:03 :
améliorations , commentaires
25 octobre 2004 00:44:25 :
fichier js séparé Deux éxemples commentés : un avec des images et l'autre avec des divs.
28 octobre 2004 00:11:25 :
bug NS6 Mozilla 1 corrigé et améliorations diverses
28 octobre 2004 00:16:16 :
ajout de l'url
25 janvier 2005 13:11:10 :
Un seul fichier js pour les 2 types de Quizz Optimisation
18 février 2005 21:59:11 :
quizz2 pas mal amélioré

 Sources du même auteur

Source avec Zip Source avec une capture MENU SELECT MULTINIVEAUX
Source avec Zip Source avec une capture ROLLOVER D'IMAGES AUTOMATIQUE
Source avec Zip Source avec une capture MENU EXPANSIF, MULTINIVEAUX
Source avec Zip MENU MULTIFONCTIONS, ACCESSIBLE
Source avec Zip Source avec une capture MENU DYNAMIQUE MULTINIVEAUX, MULTIFONCTIONS,
Toutes les sources de chimelpremier

 Sources de la même categorie

Source avec Zip Source avec une capture AVVDA : A VERY VERY DARK AFFAIRES DEMO par Cyreb
Source avec Zip Source avec une capture 3D AVEC WEBGL + MESH par Hakumbaya
SUDOKU RESOLVER (BRUTEFORECE, RÉCURSION) par amezghal
Source avec Zip MACHINE À SOUS par loicseg
Source avec Zip DOODLE JUMP EN JAVASCRIPT par Toshy62
Toutes les sources de la catégorie Jeux

Commentaires et avis

Commentaire de citt le 18/10/2004 10:24:47

C'est cool, mais une fois déposé on peut plus les changer de place moins cool ca !!!

Commentaire de chimelpremier le 18/10/2004 12:44:23

Si : tant que les cases arrivée ne sont pas toutes remplies, et même aprés en mettant provisoirement une image dans une case titre du tableau.
Dans ton script on fait un échange de src entre 2 images tandis que là c'est l'objet image qui est déplacé du div "div1" vers le tableau "t1" . L'avantage est que les images peuvent être de différentes dimensions, de différents formats ...
J'ai l'intention de l'améliorer pour pouvoir déplacer d'autres objets.

Commentaire de routry le 21/05/2007 13:09:54

Bonjour à tous,

Une petite question.
Pourquoi lorsque l'on présente le script comme ci-dessous, id="resultat" ne fonctionne pas pour la deuxième rangée ?
Un grand merci par avance pour vos réponses.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>QUIZZ dragdrop d'objets avec des images</title>
<script type="text/javascript" src="bougequiz.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="quiz.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../menu_deroulant/general.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../menu_deroulant/menu.css" />
<script type="text/javascript" src="../menu_deroulant/menu.js"></script>
</head>
  <body onload="initMenu('menu','mh'); initdrag();">
<p>Testez ces exemples :</p>
<h1>QUIZZ avec des images</h1>
<div id="quiz">
  <div>
<img id="dd6" src="egypte.gif" height="37" width="50" alt="" />
<img id="dd3" src="arabie_saoudite.gif" height="37" width="50" alt="" />
<img id="dd2" src="angleterre.gif" height="37" width="50" alt="" />
<img id="dd8" src="iran.gif" height="37" width="50" alt="" />
<img id="dd5" src="australie.gif" height="37" width="50" alt="" />
<img id="dd1" src="argentine.gif" height="37" width="50" alt="" />
<img id="dd4" src="danemark.gif" height="37" width="50" alt="" />
<img id="dd7" src="finlande.gif" height="37" width="50" alt="" />
<img id="dd0" src="belgique.gif" height="37" width="50" alt="" />
</div>
<table border="1" id="t1">
  <tr>
    <th >Belgique</th>
    <th >Argentine</th>
    <th >Angleterre</th>
    <th >Arabie Saoudite</th>
  </tr>
  <tr id="rcpTD">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table border="1" id="t1">
  <tr>
    <th >Danemark</th>
    <th >Australie</th>
    <th >Egypte</th>
    <th >Finlande</th>
    <th >Iran</th>
  </tr>
  <tr id="rcpTD">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p id="resultat">Deplacez les drapeaux dans les bonnes cases avec la souris.</p>
</div>
</body>
</html>

Commentaire de chimelpremier le 28/05/2007 23:01:17

Bonjour,
Tu as mis 2 fois id="rcpTD" !

Commentaire de routry le 29/05/2007 08:00:37

Bonjour chimelpremier,

C'est exact id="rcpTD" est mis 2 fois, si on retire le deuxième <tr id="rcpTD"> le dragdrop ne se fait pas, et si on le laisse le compteur ne fonctionne pas.
Aurais-tu une solution !

Merci.

Commentaire de subderground le 22/09/2009 19:13:19

Salut,

Ce script est super !
Mais comment pourrais-je faire pour appliquer au tableau une rotation de 90°?
Histoire d'avoir la même chose mais en vertical (drapeaux à droite et cases correspondantes à sa gauche par ex).

Merci, si vous avez une astuce car perso je ne vois pas comment faire.

@+

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Green Energy Solutions With Light Bulb Morphed Into LandscapePhoto Beautiful woman in a bikini meditating on the beach
Photo Landscape of a Sunrise in Kauai Hawaii 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,749 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)