Déplacer un div dans un autre sans dépasser les bords

Bonjour,

Voilà, j'ai deux bloc. Un bloc B dans un bloc A.
J'arrive à déplacer mon bloc B dans le bloc A, mais j'aimerais qu'il ne dépasse pas les bord du bloc A et que le bloc B disparaisse lorsque mon curseur quitte le bloc A.

Voici le petit bout de code :
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 <div id="blocA"> <img src="image1.jpg" onmousemove="masque()" alt="image1" /> <div id="blocB" style="overflow:hidden;display:none;position:relative;width: 95px;height: 95px;z-index: 100;border:1px solid #000;cursor: crosshair;background-color:#ffffff;opacity:0.5;"> </div> </div> <script type="text/javascript"> var x,y; function position(e) { if (navigator.appName.substring(0,3) == "Net") { x = e.pageX; y = e.pageY; } else { x = event.x+document.body.scrollLeft; y = event.y+document.body.scrollTop; } } if(navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE); document.getElementById("blocA").onmousemove = position; blocB = document.getElementById("blocB").style; function masque() { blocB.display = "block"; blocB.top = (y-590)+"px"; blocB.left = (x-260)+"px"; setTimeout("masque()",10); } </script>
Voilà le code, j'ai testé avec la propriété overflow, avec display sur evenement oumouseout, mais rien à faire.

Merci d'avance.

le js :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
var Drag = {
 
	MyObj : null,
	MyObjToLimit : null,
 
	init : function(o,MyObjToLimit)
	{
		Drag.MyObj = o ;
		//Sauvegarde de la classe d'origine de l'objet
		Drag.MyObj.MyClassName = o.className;
		//On vérifit si l'objet est limité a un autre objet
		Drag.MyObj.MyObjToLimit = (MyObjToLimit != null) ? MyObjToLimit:null;
		//On assigne la méthode au click de la souris sur l'MyObjet
		Drag.MyObj.onmousedown	= Drag.start;
 
		//Si l'élément n'as pas de propriété let et top on lui en assigne par défault
		if (isNaN(parseInt(Drag.MyObj.style.left  ))) Drag.MyObj.style.left   = Drag.MyObj.MyObjToLimit.offsetLeft +"px";
		if (isNaN(parseInt(Drag.MyObj.style.top   ))) Drag.MyObj.style.top    = Drag.MyObj.MyObjToLimit.offsetTop +"px";		
		//Si l'on doit limiter le déplacement a une zone on calcul les points
		if(Drag.MyObj.MyObjToLimit){
				Drag.MyObj.minLeft = 0//this.findPos(Drag.MyObj.MyObjToLimit)[0]; // 0;
				Drag.MyObj.maxRight = Drag.MyObj.minLeft + Drag.MyObj.MyObjToLimit.offsetWidth ;
				Drag.MyObj.minTop = 0//this.findPos(Drag.MyObj.MyObjToLimit)[1];//0;
				Drag.MyObj.maxBottom = Drag.MyObj.minTop+Drag.MyObj.MyObjToLimit.offsetHeight;
		}
 
	},
 
	start : function(e)
	{
		Drag.MyObj = this;
		//On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
		e = Drag.GetEvent(e);
		//On affecte la classe InDrag
		Drag.MyObj.className = "inDrag";
		//On récupère l'endroit ou se trouve la souris par rapport a l'objet clické
		Drag.MyObj.ecartX = e.clientX - parseInt(Drag.MyObj.style.left);
		Drag.MyObj.ecartY = e.clientY - parseInt(Drag.MyObj.style.top);
		//On affecte les méthodes drag et end au évènement lié au document et non a l'MyObjet
		document.onmousemove	= Drag.drag;
		document.onmouseup		= Drag.end;
 
		return false;
	},
 
	drag : function(e)
	{
		//On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
		e = Drag.GetEvent(e);
		//Récupération de la position de la souris
		var curX = e.clientX;
		var curY = e.clientY;
 
		var newPosX = curX - Drag.MyObj.ecartX;
		var newPosY = curY - Drag.MyObj.ecartY;
 
		//Si l'élément les limités a  un conteneur
		if(Drag.MyObj.MyObjToLimit != null){
			//document.getElementById('frontiere').innerHTML =newPosX + " ecart : " + Drag.MyObj.ecartX + " position : " + curX;
			//Déplacement de l'objet
			if(newPosX < (Drag.MyObj.minLeft)){
				newPosX = Drag.MyObj.minLeft;
			}
			else if((newPosX + Drag.MyObj.offsetWidth) > (Drag.MyObj.maxRight)){
				newPosX = Drag.MyObj.maxRight - Drag.MyObj.offsetWidth  ;
			}
			else{
				newPosX= newPosX ;
			}
			Drag.MyObj.style.left= newPosX +'px';
			document.getElementById('posX').value=newPosX//;-Drag.MyObj.MyObjToLimit.offsetLeft;
 
 
 
			if(newPosY < (Drag.MyObj.minTop)){
				newPosY = Drag.MyObj.minTop ;
			}
			else if((newPosY + Drag.MyObj.offsetHeight) > (Drag.MyObj.maxBottom)){
				newPosY = Drag.MyObj.maxBottom - Drag.MyObj.offsetHeight ;
			}
			else{
				newPosY = newPosY ;
			}
			Drag.MyObj.style.top= newPosY +'px';
			document.getElementById('posY').value=newPosY;//-Drag.MyObj.MyObjToLimit.offsetTop;
 
		}
		//Sinon déplacement normalement
		else{
			Drag.MyObj.style.top = newPosX + 'px';
			Drag.MyObj.style.left = newPosY + 'px';
		}
 
		return false;
	},
 
	end : function()
	{   //on mets les valeurs dasn les inputs 
 
		//On remet la classe de l'objet
		Drag.MyObj.className = Drag.MyObj.MyClassName;
		//On supprime les évènements liés au déplacement :)
		document.onmousemove = null;
		document.onmouseup   = null;
		//On détruit l'MyObjet
		Drag.MyObj = null;
 
	},
 
	GetEvent : function(e)
	{
		if (!e) e = window.event;
		return e;
	},
	findPos : function(obj){
		//position x / y de l'objet
	    var x = obj.offsetLeft || 0;
	    var y = obj.offsetTop || 0;
		//tant qu'il y a un parent, on ajoute la position de son parent
	    while (obj = obj.offsetParent) {
	        x += obj.offsetLeft
	        y += obj.offsetTop
	    }
		//Ici on retour x ou y ( ou les deux dans un tableau ou un hash
	    return new Array(x,y);
	}
};

et dans le html :

Code:

1
2
3
4
5
6
7
<style type="text/css">
.Draggable{border:0;}
.inDrag{
	border:1px dashed #ED3C12;
	}
</style>
<script type="text/javascript" src="../JSScripts/OwnScripts/limitedDrag.js" ></script>

et

Code:

1
2
3
<div id="frontiere" style="position:relative;width:402px;height:322px;border:1px solid #666;;float:left;" >
					<img id="dot" style="position:absolute;height:20px;" class="Draggable" src="image.gif" title="Positionnez l'agence sur la carte" />
				</div>

sans oublier d'initialiser:

Code:

<body onload="Drag.init(document.getElementById('dot'),document.getElementById('frontiere'));" >

Merci de ta réponse rapide.
Je ne comprend pas très bien ta solution et ça ne fonctionne pas en totalité.

De plus, il y a beaucoup de code javascript comparer à ce que je fais, et je le fais sur déplacement du curseur dans mon blocA et non sur click.

je ne vois pas comment limiter le deplacement sans calculer les positions sur un drag ...

D'accord, je vais donc essayer de modifier mon code, et de comprendre le tiens.
Par contre, dans ce que tu m'as donné, l'image bouge que horizontalement.

curieux c'est un code qui est en fonction en ligne sur des backoffices et qui fonctionne très bien sous IE et ffx ..
je n'ai pas le temps ce soir ...
mais demain je vois si je peux pas faire une petite version de démo qui fonctionne