[AJAX] [Scriptaculous] Créer des post-it (ajax, drag&drop) ?
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:
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> |
