Et bien ça commence à prendre forme
Je me suis permis de faire quelques modifs sur ce que tu avais fait, notamment pour le défilement vertical j'ai vu que tu avais mis en commentaire une ligne dans le script dragDrop.
Il ne vaut mieux pas faire comme ça si tu veux réutiliser le script plus tard pour d'autres objets.
Par contre, j'ai ajouté une fonction appelée setLimits permettant de fixer des limites en X et en Y pour le déplacement. Cette fonction prend 4 paramètres : minX, maxX, minY, maxY qui sont des valeurs de déplacement par rapport au positionnement de départ.
DOnc voici le code dans ton head, place ces lignes
<script type="text/javascript" src="dragDrop.js"></script>
<script type="text/javascript" src="myMap.js"></script>
cree un fichier dragDrop.js et place y le code suivant :
dragDrop = {
keyHTML: '<a href="#" class="keyLink">#</a>',
keySpeed: 10, // pixels per keypress event
initialMouseX: undefined,
initialMouseY: undefined,
startX: 0,
startY: undefined,
dXKeys: undefined,
dYKeys: undefined,
draggedObject: undefined,
mode: undefined,
minX: -Infinity,
minY: -Infinity,
maxX: Infinity,
maxY: Infinity,
initElement: function (element) {
if (typeof element == 'string')
element = document.getElementById(element);
element.onmousedown = dragDrop.startDragMouse;
element.innerHTML += dragDrop.keyHTML;
var links = element.getElementsByTagName('a');
var lastLink = links[links.length-1];
lastLink.relatedElement = element;
lastLink.onclick = dragDrop.startDragKeys;
},
startDragMouse: function (e) {
dragDrop.startDrag(this);
var evt = e || window.event;
dragDrop.initialMouseX = evt.clientX;
dragDrop.initialMouseY = evt.clientY;
addEventSimple(document,'mousemove',dragDrop.dragMouse);
addEventSimple(document,'mouseup',dragDrop.releaseElement);
return false;
},
startDragKeys: function () {
dragDrop.startDrag(this.relatedElement);
dragDrop.dXKeys = dragDrop.dYKeys = 0;
addEventSimple(document,'keydown',dragDrop.dragKeys);
addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
this.blur();
return false;
},
startDrag: function (obj) {
if (dragDrop.draggedObject)
dragDrop.releaseElement();
dragDrop.startX = obj.offsetLeft;
dragDrop.startY = obj.offsetTop;
dragDrop.draggedObject = obj;
obj.className += ' dragged';
},
dragMouse: function (e) {
var evt = e || window.event;
var dX = evt.clientX - dragDrop.initialMouseX;
var dY = evt.clientY - dragDrop.initialMouseY;
dragDrop.setPosition(dX,dY);
return false;
},
dragKeys: function(e) {
var evt = e || window.event;
var key = evt.keyCode;
switch (key) {
case 37: // left
case 63234:
dragDrop.dXKeys -= dragDrop.keySpeed;
break;
case 38: // up
case 63232:
dragDrop.dYKeys -= dragDrop.keySpeed;
break;
case 39: // right
case 63235:
dragDrop.dXKeys += dragDrop.keySpeed;
break;
case 40: // down
case 63233:
dragDrop.dYKeys += dragDrop.keySpeed;
break;
case 13: // enter
case 27: // escape
dragDrop.releaseElement();
return false;
default:
return true;
}
dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys);
if (evt.preventDefault)
evt.preventDefault();
return false;
},
setLimits: function (minX, maxX, minY, maxY) {
dragDrop.minX = minX;
dragDrop.maxX = maxX;
dragDrop.minY = minY;
dragDrop.maxY = maxY;
},
setPosition: function (dx,dy) {
dragDrop.draggedObject.style.left = 0 + 0 + 'px';
if ((dragDrop.startX + dx) > dragDrop.minX && (dragDrop.startX + dx) < dragDrop.maxX)
dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
if ((dragDrop.startY + dy) > dragDrop.minY && (dragDrop.startY + dy) < dragDrop.maxY)
dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
},
switchKeyEvents: function () {
// for Opera and Safari 1.3
removeEventSimple(document,'keydown',dragDrop.dragKeys);
removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
addEventSimple(document,'keypress',dragDrop.dragKeys);
},
releaseElement: function() {
removeEventSimple(document,'mousemove',dragDrop.dragMouse);
removeEventSimple(document,'mouseup',dragDrop.releaseElement);
removeEventSimple(document,'keypress',dragDrop.dragKeys);
removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
removeEventSimple(document,'keydown',dragDrop.dragKeys);
dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,'');
dragDrop.draggedObject = null;
}
}
function addEventSimple(obj,evt,fn) {
if (obj.addEventListener)
obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
obj.attachEvent('on'+evt,fn);
}
function removeEventSimple(obj,evt,fn) {
if (obj.removeEventListener)
obj.removeEventListener(evt,fn,false);
else if (obj.detachEvent)
obj.detachEvent('on'+evt,fn);
}
Ainsi tu as ton script dragDrop à part, que tu peux réutiliser ailleurs.
Crée enfin un fichier myMap.js et place y ce code:
myMap = {
container: undefined,
init: function(element) {
if (typeof element == 'string')
element = document.getElementById(element);
dragDrop.initElement(element);
dragDrop.setLimits(0, 0, -500, 0);
myMap.container = element.parentNode;
myMap.container.style.overflow = 'hidden';
}
}
window.onload = function () {myMap.init('carte');};
C'est ici qu'on initialise le dragDrop sur ton élément 'carte' et qu'on y fixe des limites pour le déplacement . Enfin on passe le div parent de 'carte' en overflow:'hidden';
Tu peux tester en mettant la ligne setLimits en commentaire, cela devrait fonctionner sans contrainte.
Pour le css, tu devrais également le placer dans un fichier externe
Pour l'overflow ligne à modifier :
#conteneurCarte {
width: 620px;
height: 400px;
overflow: auto;
position: relative;
border: 1px solid #E0E3C9;
margin-left: 20px;
}
Bon courage
dunjl
Modifié par dunjl (15 Jan 2008 - 19:38)
