Draggable qui ne doit pas quitter le parent

**Arnaud F.** · 08/07/2009, 16h25

Bonjour,

je souhaiterais que mes objets draggable que je créés ne sortent pas de la div parente dans laquelle ils sont contenues.

Je pars donc avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script src="javascript/prototype.js" type="text/javascript"></script>
  <script src="javascript/scriptaculous.js" type="text/javascript"></script>
  <title></title>
  </head>
  <body>
 
  <!-- Bat builder -->
  <script type="text/javascript">
	function visu_build_bat()
	{
	    var bat_list = document.getElementById("visu_bat_list");
	    var bat_value = bat_list.options[bat_list.selectedIndex].value;
        var bat_id = "visu_bat_" + bat_value;
 
        if(!exists_bat_value(bat_value))
        {
			var div = Builder.node('div', {id:bat_id, style: "width: 100px; height: 100px; background-color: black;"});
			var par = Builder.node('p', { style: "text-align:center; color:white;"}, bat_id);
			div.appendChild(par);
			$('visu_bats').appendChild(div);
 
			new Draggable(bat_id, {
				snap : function(x, y, draggable)
				{
					function keepIntoMaster(n, lower, upper)
					{
						if (n < lower) return lower;
						//else if (n > upper) return upper;
						else return n;
					}
 
					element_dimensions = Element.getDimensions(draggable.element);
					parent_dimensions = Element.getDimensions(draggable.element.parentNode);
					alert(draggable.element.parentNode.id);
					return[
						keepIntoMaster(x, 0, parent_dimensions.width - element_dimensions.width),
						keepIntoMaster(y, 0, parent_dimensions.height - element_dimensions.height)
					];
				},
				scroll:window
			});
			Draggables.addObserver(bat_id);
		}
		else
		{
		    new Effect.Highlight(bat_id, {startcolor:"#FF0000"});
		}
	}
 
	function exists_bat_value(bat_value)
	{
	    var exists = false;
	    if(Draggables.drags != "")
	    {
	        for(i = 0; !exists && i < Draggables.drags.length; i++)
			{
				if((Draggables.drags[i].element).id == ("visu_bat_" + bat_value))
				{
					exists = true;
					break;
				}
			}
		}
		return exists;
	}
  </script>
  <!-- -->
 
  <div id="menu" style="width:20%;height:100%;float:left;">
	<h1>Cr&eacute;ation de b&acirc;timent :</h1>
	<p>Placer cr&eacute;er b&acirc;timent : </p>
	<select id="visu_bat_list">
	    <option value = "B1" selected="selected">B1</option>
	    <option value = "B1A">B1A</option>
	    <option value = "B2">B2</option>
	</select>
 
	<input type="button" onclick="visu_build_bat()" value="Cr&eacute;er">
  </div>
  <div id="visu_bats" style="width:80%;height:100%;float:right;background-color:grey;"/>
  </body>
</html>

Ma div principale étant en gris, on voit facilement l'étendue de celle-ci. Or quand on créé plusieurs draggable, elle ne peuvent pas allez dans le coin inférieur gauche...

On reproduit le problème facilement :
1) Créer deux bâtiments
2) Tenter de mettre le second dans le coin inférieur gauche de la div principale...

Qu'ai-je fais de mal?

**Arnaud F.** · 08/07/2009, 16h35

Après quelques tests, ça vient de la CSS mais vu que je suis une bille dans le domaine...

En fait, lorsque le Draggable est créé, il prend pour origine (x=0, y=0) l'endroit où il a été créé dans la fenêtre...

Donc si quelqu'un à la solution CSS à mon problème, il est le bienvenu !