Bonjour,

Je suis sur un projet qui demande beaucoup de connaissance en Javascript et bien entendu je me débrouille un peu mais sans plus...

En gros, j'ai une image et une barre d'outil. Pour l'instant j'ai simplement un élément de type h5 que l'on peut déplacer par drag&drop. une fois déplacer une fonction me balance les coordonnées X,Y du marqueur. (qui sera ensuite enregistré en base par AJAX).
De plus mon marqueur est éditable en double cliquant dessus (afin de laisser un commentaire).

Pb: comment puis-je créer plusieurs marqueurs avec un Id différent ? Sinon, comme dupliquer un élément plusieurs fois avec la framework script.aculo.us ?

Voici le script :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
34
35
36
37
38
39
40
 
 
<body> 
 <h5 class="item" id="marker-1" ondblclick="inlineMod(1, this, 'marker-', 'Texte')">Je suis un marker</h5> 
 
 <div id="monImage"> 
     <img src="Tapetka2 copy.jpg" width="500px" /> 
 </div> 
 
 <div id="message"></div> 
 
 
 <script type="text/javascript"> 
 
     // declaration du marker 
     var marker = document.getElementById('marker-1'); 
 
     message = ''; 
 
     //fonction de recuperation des coordonnées 
     function getXY(monobjet){ 
         message = 'X : '+ monobjet.offsetLeft + '\nY : ' + monobjet.offsetTop; 
         document.getElementById('message').innerHTML = message; 
     } 
 
     //instanciation d'un nouveau marqueur 
     new Draggable('marker-1', {ghosting:true, revert:false}); 
 
     //zone de drop, qui est accepété ? les element qui ont pour class 'item' 
     Droppables.add ('monImage', { 
         accept: 'item', 
 
         onDrop: function(element) { 
             getXY(marker); 
         } 
 
     }); 
</script> 
 
 </body>