jquery dragable avec contraintes
Bonjour
J ai un petit soucis je voudrais faire du drag avec jquery mais le soucis c'est qu'il renvoie des values absolutes. Je voudrais savoir si c'est possible de lui faire retourner des valeurs par rapport a son div parent et de le contraindre dedans ?
Voici mon 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/ui.core.js"></script>
<script src="js/ui.draggable.js"></script>
<script type="text/javascript">
$(function() {
$(".draggable").draggable(
{
grid: [15, 15],
drag: function(event, ui) {
$(".draggable").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function(event, ui) {
saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, ui.helper.attr('id'));
$(".draggable").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
});
function saveCoords(x, y, el) {
request('POST','includes/save_coords_pc.inc.php','coords=ok&id='+ el + '&x='+ x + '&y=' + y,'ajax_content');
}
</script>
<STYLE type=text/css>
.draggable { width: 150px; height: 150px; padding: 0.5em; border:dashed #333333; }
.demo { width:750px; height:450px; border:dashed #000; };
</STYLE>
<DIV class=demo>
<DIV class=draggable id="1">
<P>Drag me around</P>
</DIV>
<DIV class=draggable id="2">
<P>Drag me around</P>
</DIV>
<DIV class=draggable id="3">
<P>Drag me around</P>
</DIV>
</DIV> |
J'ai vu du ui.helper ou constraint mais je vois pas comment les implenter dans mon script donc si qq un peut m'aider ce serait sympa :)
