Drag&Drop de plusieurs éléments [Résolu]

[humitake]

Bonjour !

Je dispose d'une page web avec deux div :
- le premier situé à gauche est un menu
- l'autre est le reste de la page
Dans le div "reste de la page" il y a un plan qui est afficher, on peut zoomer dessus et le déplacer, dès que sa sort du div ce n'est plus afficher (overflow: hidden).
Dans le div "menu" il y a une liste de point avec une image a coté de chaque libellé.
Le but est de prendre un des points et de le placer sur le plan, ceci fonctionnant parfaitement.

Mon seul problème est que lorsque je souhaite déplacer le plan les points placé dessus ne bouge pas avec lui, logique vu que c'est pas fait pour...

J'utilise le code fournit dans ce tuto (developpez).

J'ai essayer de le modifier ainsi :

Code javascript :

1
2
3
4
5
6
7
8
9
10
setPosition: function (dx,dy) {
            dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
            dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
//Mes modifications commence ici
            if(dragDrop.draggedObject.id == 'plan'){
                document.getElementById('0001').style.left = document.getElementById('0001').offsetLeft + dx + 'px';
                document.getElementById('0001').style.top = document.getElementById('0001').offsetTop + dy + 'px';
            }
//Mes modifications s'arrête ici
	},

Mais quand je bouge le plan le point qui se trouve dessus bouge à la vitesse de la lumière et se retrouve donc décalé par rapport au plan.
Je pense que cela est dû au fait que l'image du point est beaucoup plus petite que l'image du plan. Par contre je ne voit pas quoi faire pour faire en sorte que sa marche...
Si quelqu'un voit la solution et peut m'expliquer pourquoi sa ne marche pas ce serait sympa

Merci d'avance.

[humitake]

J'ai réussi !

En fait c'est parce que je récupérait les valeurs à chaque mouvement de la souris alors qu'il fallait les récupérer au premier clic, les stocker et les juste les récupérer. Ce qui donne pour un seul éléments supplémentaire avec l'id renseigné dans le code :

Code javascript :

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
41
42
43
44
45
46
47
48
49
50
dragDrop = {
                keyHTML: '<a href="#" class="keyLink">#</a>',
                keySpeed: 10, // pixels per keypress event
                initialMouseX: undefined,
                initialMouseY: undefined,
                startX: undefined,
                startY: undefined,
                dXKeys: undefined,
                dYKeys: undefined,
                draggedObject: undefined,
                /*
                 * Mes modifications commencent ici
                 */
                elementsX: undefined,
                elementsY: undefined,
                /*
                 * Mes modifications se terminent ici
                 */
...
startDrag: function (obj) {
            if (dragDrop.draggedObject)
                dragDrop.releaseElement();
            dragDrop.startX = obj.offsetLeft;
            dragDrop.startY = obj.offsetTop;
            /*
             * Mes modifications commence ici
             */
            dragDrop.elementsX = document.getElementById('0001').offsetLeft;
            dragDrop.elementsY = document.getElementById('0001').offsetTop;
            /*
             * Mes modifications se terminent ici
             */
            dragDrop.draggedObject = obj;
            obj.className += ' dragged';
	},
...
setPosition: function (dx,dy) {
            dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
            dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
            /*
             * Mes modifications commencent ici
             */
            if(dragDrop.draggedObject.id == 'plan'){
                document.getElementById('0001').style.left = dragDrop.elementsX + dx + 'px';
                document.getElementById('0001').style.top = dragDrop.elementsY + dy + 'px';
            }
            /*
             * Mes modifications se terminent ici
             */
	},