Drag and Drop sauvegardé en base

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 :

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
 
<!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 position :

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
 
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,
			});
	}
};

Fonction draggable :

Code:

1
2
3
4
 
$(function() {
	$("#draggable").draggable();	
});

Update position :

Code:

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 fais un reset.css avant tout que j'ai téléchargé sur le net.

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.