Drag&Drop de plusieurs éléments
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:
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. :cry:
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 :ccool:
Merci d'avance.
