Déplacement de tables dans une page

Version imprimable

Salut à tous , j'ai ce code en php et html qui marche parfaitement et qui me permet d'afficher des tables comme je le souhaite

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
<!DOCTYPE html>
<html>
<pre>
<?php
error_reporting(0);
set_time_limit(3600);
mysql_connect("localhost","root","") or die("Impossible de se connecter");
mysql_select_db("supervision") or die("pas possible de trouver la base");
$result = mysql_query("SELECT nom_groupe, etat_groupe, nom_du_service, port, adresse_ip, nom_hote FROM groupe_service, service WHERE etat_groupe = 'actif' AND groupe_service.id_service = service.id_service ORDER BY nom_groupe" );
while ($ligne = mysql_fetch_array($result)) {
 
if($ligne[0]!=$nomgroup)
{ echo"<table style='margin:auto;padding:5px;border-collapse:collapse;border: 1px solid black;'>";
    echo"<tr>";
    echo    "<th colspan='2' style='background-color:black;color:white;text-align:center;padding:5px'>";
             echo "<b>Etat $ligne[0]</b></br>";
              $nomgroup=$ligne[0];
    echo    "</th>";
    echo "</tr>";
 
}
 
$fp = fsockopen($ligne[4], $ligne[3], $errstr, $errno , 10);
if (!$fp) {
echo "<tr style='font-size:small;padding:5px;vertical-align:top;#000000;background-color:#FFFFFF';color:black;><td><b>Service $ligne[2] on $ligne[5]</b></td><td><img src='http://www.vincent-sene.com/rappelz/etat_serveur/images/offline.png'/></td></tr></br>";
 
}
 
else {
echo "<tr style='font-size:small;padding:5px;vertical-align:top;#000000;background-color:#FFFFFF';color:black;><td><b>Service $ligne[2] on $ligne[5]</b></td><td><img src='http://www.vincent-sene.com/rappelz/etat_serveur/images/online.png'/></td></tr></br>";
 
while (!feof($fp))
{
 echo fgets($fp, 128);
}
fclose($fp); }
}
echo "</table>";
?>
</pre>
</html>

Cependant , j'aimerai bien savoir comment faire pour pouvoir déplacer les tables affichées librement dans la page avec un clic dessus , j'ai beau cherché je ne trouve pas réponse à ma question :( (je débute)

25/04/2014, 20h42
NoSmoking

Bonjour,
fais une recherche avec les mots clé DRAG and DROP.
25/04/2014, 23h54
kiwilicious

merci pour ta réponse, j'ai fait quelques recherches sur drag and drop , il s'agit bien de cela sauf que là c'est la galère avec le code pour l'adapter au mien et pouvoir déplacer toute la table avec son contenu dans n'importe quelle location de la page :?
26/04/2014, 09h51
NoSmoking
Je te propose de t'appuyer sur 2 exemples disponibles dans la rubrique Contribuez
- Drag and Drop avec délimiteur
- drag and drop, le retour

à l'aide du code suivant , j'ai pu résoudre une partie du problème

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
 
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
<pre>
<?php
error_reporting(0);
set_time_limit(3600);
mysql_connect("localhost","root","") or die("Impossible de se connecter");
mysql_select_db("supervision") or die("pas possible de trouver la base");
$result = mysql_query("SELECT nom_groupe, etat_groupe, nom_du_service, port, adresse_ip, nom_hote FROM groupe_service, service WHERE etat_groupe = 'actif' AND groupe_service.id_service = service.id_service ORDER BY nom_groupe" );
while ($ligne = mysql_fetch_array($result)) {
 
if($ligne[0]!=$nomgroup)
{ echo"<div id='draggable' class='ui-widget-content'><table style='margin:auto;padding:5px;border-collapse:collapse;border: 1px solid black;'>";
	echo"<tr>";
	echo	"<th colspan='2' style='background-color:black;color:white;text-align:center;padding:5px'>";
			 echo "<b>Etat $ligne[0]</b></br>";
			  $nomgroup=$ligne[0];
	echo	"</th>";
	echo "</tr>"; 
}
 
$fp = fsockopen($ligne[4], $ligne[3], $errstr, $errno , 10); 
if (!$fp) { 
echo "<tr style='font-size:small;padding:5px;vertical-align:top;#000000;background-color:#FFFFFF';color:black;><td><b>Service $ligne[2] on $ligne[5]</b></td><td><img src='http://www.vincent-sene.com/rappelz/etat_serveur/images/offline.png'/></td></tr></br>"; 
 
}
 
else { 
echo "<tr style='font-size:small;padding:5px;vertical-align:top;#000000;background-color:#FFFFFF';color:black;><td><b>Service $ligne[2] on $ligne[5]</b></td><td><img src='http://www.vincent-sene.com/rappelz/etat_serveur/images/online.png'/></td></tr></br>";
 
while (!feof($fp)) 
{
 echo fgets($fp, 128); 
} 
fclose($fp); } 
}
echo "</table></div>";
?>
</body>
</pre>
 </html>

sauf que pour les tables qui s'affichent je ne peux pas les déplacer une à une , je ne peux que les déplacer toutes à la fois (en bloc)

j'ai isolé les tables comme suit
Code:

1 2 <table class='table' style='margin:auto;padding:5px;border-collapse:collapse;border: 1px solid black;'>
et j'ai modifié le code comme suit :
Code:

1 2 3 4 5 6 <script> $(function() { $('.table').draggable(); }); </script>
ça marche! :D