quizz avec glissé déposé d'objets compatible (drag&drop) .

Soyez le premier à donner votre avis sur cette source.

Vue 8 359 fois - Téléchargée 1 020 fois

Description

Code javascript + DOM1 devrait être supporté par pas mal de butineurs.
http://moncastel.9online.fr/dragdrop

Source / Exemple :


<!-- 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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

subderground
Messages postés
6
Date d'inscription
samedi 24 mai 2008
Statut
Membre
Dernière intervention
17 septembre 2009

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.

@+
routry
Messages postés
14
Date d'inscription
jeudi 22 juillet 2004
Statut
Membre
Dernière intervention
14 mai 2007

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.
chimelpremier
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005

Bonjour,
Tu as mis 2 fois id="rcpTD" !
routry
Messages postés
14
Date d'inscription
jeudi 22 juillet 2004
Statut
Membre
Dernière intervention
14 mai 2007

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>

Testez ces exemples :


QUIZZ avec des images
















Belgique |
Argentine |
Angleterre |
Arabie Saoudite |

Danemark |
Australie |
Egypte |
Finlande |
Iran |

Deplacez les drapeaux dans les bonnes cases avec la souris.





</html>
chimelpremier
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005

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.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.