Draggable qui ne doit pas quitter le parent
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:
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éation de bâtiment :</h1>
<p>Placer créer bâ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é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?
:merci:
