Déplacement de tables dans une page

**kiwilicious** · 25/04/2014, 20h18

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

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
<!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)

**NoSmoking** · 25/04/2014, 20h42

Bonjour,
fais une recherche avec les mots clé DRAG and DROP.

**kiwilicious** · 25/04/2014, 23h54

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

**NoSmoking** · 26/04/2014, 09h51

Je te propose de t'appuyer sur 2 exemples disponibles dans la rubrique Contribuez

**kiwilicious** · 26/04/2014, 15h52

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

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
 
 
<!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)

**kiwilicious** · 26/04/2014, 16h07

j'ai isolé les tables comme suit

Code :

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

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 :

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

1
2
3
4
5
6
 
 <script>
  $(function() {
   $('.table').draggable();
  });
  </script>

ça marche!

Déplacement de tables dans une page

jQuery

Vue hybride

Discussions similaires

Partager

Partager