Drag and Drop sauvegardé en base

**seb76250** · 18/06/2011, 15h02

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Update 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
 
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.

**seb76250** · 18/06/2011, 15h09

J'avai mis des echos des position sur l'index.php et du coup ça faisais un décalage. L’erreur du débutant.
Désolé pour le post inutile.

Drag and Drop sauvegardé en base

jQuery

Discussions similaires

Partager

Partager