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