Bonjour,
Je fais des tests avec la librairie JQuery et je suis confronté à un problème.
Le but étant de pouvoir bouger l'image et enregistrer automatiquement sa position dans une base de données MySql.
Toute cette étape fonctionne excepté que lorsque je recharge ma page et donc positionne l'image au dernier enregistrement, il y a un gros décalage d'environ 20 pixels en haut comme à gauche.
Voici le code :
Index.php :
Fonction position :
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script> <script type="text/javascript" src="js/draggable.js"></script> <script type="text/javascript" src="js/position.js"></script> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" /> <link rel="stylesheet" href="css/test.css" type="text/css" /> <title>Systeme documentaire</title> </head> <body> <?php try { $connection = new PDO('mysql:host=localhost;dbname=test', 'root', ''); $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $statement = $connection->query("SELECT id_identifiant, id_outil, posX, posY FROM identifiants WHERE id_page IN (SELECT id_page FROM pages WHERE nom = 'cartographie')"); $statement->setFetchMode(PDO::FETCH_ASSOC); while($row = $statement->fetch()) { $id_outil = $row['id_outil']; $id_identifiant = $row['id_identifiant']; $posX = $row['posX']; $posY = $row['posY']; $statement2 = $connection->query("SELECT nom, ext FROM outils WHERE id_outil = '$id_outil'"); $statement2->setFetchMode(PDO::FETCH_ASSOC); $row2 = $statement2->fetch(); $img = $row2['nom'].'.'.$row2['ext']; ?> <img id="draggable" onclick="position('<?php echo $id_identifiant; ?>')" style="top: <?php echo $posY; ?>px; left:<?php echo $posX; ?>px" src="img/<?php echo $img; ?>"> <?php } } catch(Exception $e) { die('Erreur : '.$e->getMessage()); } ?> </body> </html>
Fonction draggable :
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 function position(idIdentifiant) { jQuery.fn.extend({ findPos : function() { obj = jQuery(this).get(0); var curleft = obj.offsetLeft || 0; var curtop = obj.offsetTop || 0; while (obj = obj.offsetParent) { curleft += obj.offsetLeft curtop += obj.offsetTop } return {x:curleft,y:curtop}; } }); var myObj = document.getElementById("draggable"); pos = $(myObj).findPos(); var posX = pos.x; var posY = pos.y; if(idIdentifiant != "") { $.ajax({ type: "POST", url: "http://localhost/fonctions_php/update_position.php", data: "id_identifiant="+idIdentifiant+"&posX="+posX+"&posY="+posY, }); } };
Update position :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 $(function() { $("#draggable").draggable(); });
Je fais un reset.css avant tout que j'ai téléchargé sur le net.
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 if(isset($_POST['id_identifiant']) && isset($_POST['posX']) && isset($_POST['posY'])) { try { $connection = new PDO('mysql:host=localhost;dbname=test', 'root', ''); $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $posX = $_POST['posX']; $posY = $_POST['posY']; $id_identifiant = $_POST['id_identifiant']; $connection->query("UPDATE identifiants set posX = '$posX', posY = '$posY' WHERE id_identifiant = '$id_identifiant'"); } catch(Exception $e) { die('Erreur : '.$e->getMessage()); } }
Je ne vois vraiment pas d'où viens ce décalage.
Je vous joint l'archive avec la base et le code si vous voulez tester.
Merci d'avance pour votre aide.
Partager