draggable revert

**Baptiste78** · 07/10/2010, 12h40

Bonjour !

J'ai actuellement un script qui me permet de bouger des divs enregistrés dans une bdd avec sauvegarde automatique lors du déplacement de ses divs, dans la bdd.

Cependant, j'aimerais établir une zone de déplacement, par exemple un carré de 500*500, et lorsque l'on bougerait un div hors de ce cadre, la fonction revert se mettrait en route et donc le div se remettrait à sa place. Mais si on déplacerait le div à l'intérieur de ce cadre, il n'y aurait pas de revert.

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
 
 
<script type="text/javascript">
    $(function() {
    <?php
    while($row = mysql_fetch_array($result))
        { 
        ?>
        $("#<?php echo $row['id']; ?>").draggable();
        <?php } ?>
 
 
 
 
 
 
 
            });
 
        $("li").onmouseup(changePosition(this.id));
 
        function changePosition(idrecup)
        {
 
            var id = idrecup;
            //alert(id);
            //var offset = $(this).offset();
            var offset = $('#'+id).offset();
            //alert(offset.left+'-'+offset.top);
            document.getElementById(id).value = offset.top+'-'+offset.left;
 
 
                                          $.ajax({
url: "sort_menu.php",
type: "post",
data: "id="+ id +"&top="+ offset.top +"&left="+ offset.left +"",
error: function(){
alert("theres an error with AJAX");
}
});
 
        }
 
 
 
    </script>
</head>
<body>
 
 
 
 
<ul id="sortable" style="500px; height: 500px; border: 1px solid black;">
    <?php
             $result = mysql_query("SELECT * FROM `menu`") or die(mysql_error());
        while($row = mysql_fetch_array($result))
        { ?>
        <div id="<?php echo $row['id']?>" style="position: absolute; top:<?php echo $row['top']?>px; left:<?php echo $row['left']?>px;" onclick="changePosition('<?php echo $row['id'] ?>')"><?php echo $row['title']?></div>
 
        <?php } ?>
 
 </ul>

Merci d'avance pour votre aide !

**danielhagnoul** · 07/10/2010, 22h43

Bonsoir

Voir jQuery UI Draggable : http://jqueryui.com/demos/draggable/#revert

draggable revert

jQuery

Vue hybride

Discussions similaires

Partager

Partager