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?