Du Drag and Drop avec transmission de variable ou url

[-Hamadryade-]

Salut à tous !

Pour un projet de plateforme web à but médical, j'aurais besoin de votre aide.
Je viens de me mettre au javascript pour ce projet, mais n'en ai jamais fait avant, et c'est plutôt urgent donc je n'ai pas le temps d'approfondir plus que ça.

Ma page web serait constituée d'une boîte à gauche dans laquelle se situerait plusieurs div draggables, et d'une boîte à droite dans laquelle on afficherait plusieurs courbes. Ces courbes seraient générées à l'aide d'un script php que j'ai écrit et qui fonctionne.
Le but serait de pouvoir faire glisser chaque div draggable dans la boîte de droite pour que les courbes correspondantes soient affichées à l'écran.

C'est donc une histoire de variable contenue dans chacune des div (ici alt) à transmettre pour afficher des courbes différentes suivant le div glissé.

En ce qui concerne la partie html :

Code :

1
2
3
4
5
6
7
 
<div id="boite_gauche">
<div id="objet_draggable" draggable="true" ondragstart="drag(this,event)" ondragend="enddrag(this.event)" alt=210072011">10/07/2011</div>
<div ... ></div>
<div ... ></div>
 
<div id="boite_droite" ondrop="drop(this.event)" ondragover="over(this.event)" ondragenter="enter(this.event)" ondragleave="leave(this.event)">

La partie javascript de drag and drop classique, je ne mets que les parties des fonctions qui nous intéressent :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
function dra(tgt,e)
{
e.dataTransfer.setData("Text",tgt.id);
e.dataTransfer.effectAllows = 'move';
}
function drop(tgt.e)
{
var id = e.dataTransfer.getData("Text");
tgt.appendChild(document.getElementById(id));
e.preventDefault();
}

Je pensais donc remplacer les set et get Data.
Par exemple :

Code :

setData("Url",'aff_courbe.php?adresse=' + tgt.alt + '&largeur=270&hauteur=200")';

Le script php de génération de courbe prend en paramètres la hauteur, la largeur de la courbe et le nom du fichier de données .txt à afficher (qui correspond ici à la valeur du alt).
Je ne sais pas trop ce que ça donnerait niveau getData, il faudrait qu'il récupère l'adresse de la courbe à générer et l'affiche dans la boîte de droite.

J'espère avoir été assez claire.

Si quelqu'un a une idée, je suis preneuse =)

Merci d'avance.
Hamadryade

[mekal]

et la fonction elle recupere les donnes par de l'ajax ?

pour recupere l'attirbut du alt il faut utiliser getAttribute

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript">
 
	function drag(tgt,e)
{
 
var aaalt=tgt.getAttribute('alt')
 
e.dataTransfer.setData("text/plain", aaalt);
e.dataTransfer.effectAllows = 'move';
}
 
 
function drop(tgt,e)
{
var valeur = e.dataTransfer.getData("text/plain");
 
 
 alert(valeur)
}
e.preventDefault();
}
 
 
	</script>
 
</body>
<div id="boite_gauche">
<div id="objet_draggable" draggable="true" ondragstart="drag(this,event)" alt="210072011">10/07/2011</div>
<div ... ></div>
<div ... ></div>
 
<div id="boite_droite" ondragover="return false" ondrop="drop(this,event)" >
</html>

[-Hamadryade-]

Hum bon, petit avancement, voilà mon code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
function dra(tgt,e)
{
e.dataTransfer.setData("Text", '<img="aff_courbe.php?adresse=' + tgt.alt + '&amp;largeur=270&amp;hauteur=200" />');
e.dataTransfer.effectAllows = 'move';
}
function drop(tgt.e)
{
var elem = e.dataTransfer.getData("Text");
e.tgt.textContent = elem;
e.preventDefault();
}

Mais quand je drag and drop mes objets droppables dans la boîte de droite, un message d'erreur apparaît : "L'URL n'est pas valide et ne peut être chargée."
Mauvais syntaxe de l'URL sûrement, mais je vois pas trop ou.

Si quelqu'un a une idée, je suis toujours preneuse =)

------
Edit : Je n'avais pas vu ta réponse, merci, j'essaie de suite !

Et euh, Ajax, rien de ça, il faut ? Pour transmettre les infos dans le fichier .php ?

------
Re-edit : J'ai récupéré l'attribut alt comme tu me l'as indiqué et j'ai ajouté un eval() autour de ma balise img, plus d'erreur. Mais ça n'affiche toujours pas ma courbe.

[-Hamadryade-]

Je me suis un peu penchée sur l'Ajax.
Je pars sur un truc de ce style-là :

Code :

1
2
3
4
5
6
7
8
9
10
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() 
{
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
{
callback(xhr.responseText);
}
};
xhr.open("GET","aff_courbe.php?adresse=" + aaalt + "&largeur=270&hauteur=200",true);
xhr.send(null);

Mais, je suis un peu dans le flou. Je sais pas comment m'y prendre à partir de là. C'est peut-être aussi du gros n'importe quoi :p

Encore une fois, si quelqu'un a des réponses, ou des bouts de réponse, ca m'intéresse