drag&drop, redirection vers la page de traitement

**herve911** · 02/12/2014, 22h21

Bonsoir à tous,
tout d’abord j’espère poster au bon endroit (ce forum est très complet mais très vaste aussi !!!!! )

voila je tente de faire un petit programme de gestion de lits ( pour le fun mais finalement c'est pas si drôle....) avec du drag& drop. j'ai donc fait plusieurs <li> qui sont draggable d'une <div> à l'autre. cependant j'aimerais qu'au drop ( donc lorsqu'on à fini l'action ) de mes <li> je puisse traiter l’état de mes <li>.
je pensais donc tout bêtement faire un header Location vers ma page de traitement qui contiendrait ma requête sql de changement d'état.... petit problème : ou dois faire mon header location ( oui je sais j'ai au drop......mais ou ?????)

donc si vous avez la moindre piste qui puisse m'aider merci d'avance.
voici mon code :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<?php
session_start();
echo $_SESSION['uf'].'<br />';
?><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Accueil service</title>
 
<!--Mise en place du javascript pour le drag and drop -->
<script type="text/javascript"> 
            //<![CDATA[ 
            if('draggable' in document.createElement('span')) { 
            document.write('Drag &amp; drop supporté'); 
            } 
            else{ 
            document.write('Drag &amp; drop non supporté'); 
            } 
 
            function OnDragStart(target, evt){
                evt.dataTransfer.setData('IdElement', target.id);
            }
            function OnDropTarget(target, evt){
                var id = evt.dataTransfer.getData('IdElement');
                target.appendChild(document.getElementById(id));
                evt.preventDefault();
            }
            //]]> 
</script>
 
<!-- connexion à la base de données -->
<?php
include ('includes/connect.inc.php');
?>
 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
</head>
 
<body>
<section id="main">
<p>
<h1>Gestion des lit du service</h1>
</p>
 
<div class="nonDispo" ondragover="return false" ondrop="OnDropTarget(this, event);">
<p>
<h3 class="titre">Liste des chambres occupées</h3>
</p>
 
<?php
//on recupere les données concernant les chambres occupées du services.
$sql=$bdd->prepare('SELECT * from chambres where uf_service = ? AND etat = ?');
$sql->execute(array($_SESSION['uf'], 'indisponible'));
 
while ($donnees = $sql->fetch())
{
    if( !isset($donnees['id']) || $donnees['etat']!='indisponible') 
    {
        echo 'Toute les chambres du service sont disponible';
    }
    else
    {
        $etat=$donnees['etat'];
        $numero_chambre=$donnees['numero_chambre'];
        $id_chambre=$donnees['id'];
?>
 
<ul>
<li id="divDragDrop<?php echo $id_chambre; ?> " class="occupee" draggable="true" ondragstart="OnDragStart(this, event);">Chambre N° : <?php echo $numero_chambre; ?></li>
</ul>
 
<?php
}
}
//on termine la requete
$sql->closeCursor();
?>
</div><!--fermeture du premier bloc-->
 
<div class="disponible" ondragover="return false" ondrop="OnDropTarget(this, event);"> 
<p>
<h3 class="titre">Liste des chambres disponnibles</h3>
</p>
 
<?php
//on récupére les données concernant les chambres disponnibles du service
$sql=$bdd->prepare('SELECT * from chambres where uf_service = ? AND etat = ?');
$sql->execute(array($_SESSION['uf'], 'disponible'));
 
while ($donnees = $sql->fetch())
{
    if( !isset($donnees['id']) || $donnees['etat']!='disponible')
    {
        echo 'Il n\'y a pas de chambres de disponnible';
    }
    else
    {
        $etat=$donnees['etat'];
        $numero_chambre=$donnees['numero_chambre'];
        $id_chambre=$donnees['id'];
?>
 
<ul>
<li id="divDragDrop<?php echo $id_chambre; ?>" class="dispo" draggable="true" ondragstart="OnDragStart(this, event);">Chambre N° : <?php echo $numero_chambre; ?></li>
</ul>
<?php
    }
}
//on ferme la requete
$sql->closeCursor();
?>
</div><!--fermeture du second bloc-->
 
<div class="Reserve" ondragover="return false" ondrop="OnDropTarget(this, event);">
<p>
<h3 class="titre">Liste des chambres reservées</h3>
</p>
<?php
//on recupere les données concernant les chambres occupées du services.
$sql=$bdd->prepare('SELECT * from chambres where uf_service = ? AND etat = ?');
$sql->execute(array($_SESSION['uf'], 'reserve'));
 
while ($donnees = $sql->fetch())
{
    if( !isset($donnees['id']) || $donnees['etat']!='reserve')  
    {
        echo 'Il n\'y a aucune chambre de reservé';
    }
    else
    {
        $etat=$donnees['etat'];
        $numero_chambre=$donnees['numero_chambre'];
        $id_chambre=$donnees['id'];
?>
 
<ul>
<li id="divDragDrop<?php echo $id_chambre; ?> " class="occupee" draggable="true" ondragstart="OnDragStart(this, event);">Chambre N° : <?php echo $numero_chambre; ?></li>
</ul>
 
<?php
}
}
//on termine la requete
$sql->closeCursor();
?>
</div><!--fermeture du dernier bloc-->
</section>
</body>
</html><br><br>

**NoSmoking** · 03/12/2014, 22h30

Bonjour,
on va commencer par

Comprendre document.write() en JavaScript.

Sur le DROP tu fais un appel Ajax vers ta page coté serveur même si je pense que c'est un peu expéditif!

**herve911** · 06/12/2014, 10h04

merci de ta réponse je reviendrais certainement pour des éclaircissements.

Ok j'ai compris le message....lol. mais bon le document.write dans mon javascript ne sert qu'à vérifier si le navigateur supporte ou pas le drag and drop pour mes tests personnels.
Mais bon dans la mesure ou c'est de l'ordre du facultatif. .... en quoi cela m' apporte une reponse?
Dois je utiliser une methode ajax et si oui comment faire?

**NoSmoking** · 07/12/2014, 10h18

Quoiqu'il arrive il est bon de prendre de bonnes habitudes...ou de ne pas en prendre de mauvaises

Dois je utiliser une methode ajax et si oui comment faire?

comme dit plus haut dans la fonction liée au déposé

Code :

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

1
2
3
4
5
6
7
8
9
10
11
  function OnDropTarget(target, evt) {
    var id  = evt.dataTransfer.getData('IdElement'),
        oUl = target.getElementsByTagName('UL')[0];
    if( oUl){
      oUl.appendChild(document.getElementById(id));
      //-------------------------- 
      // FAIRE LA REQUETE AJAX ICI
      //--------------------------
    }
    evt.preventDefault();
  }

**herve911** · 07/12/2014, 19h32

oui c'est vrai que prendre de mauvaises habitudes ça va vite...d'autant plus que ce genre de document.write y en a partout.... bref je te remercie je vais tester ta réponse et je te tient au courant de mon résultat et je vais aussi en profiter pour m'informer sur AJAX et son fonctionnement..

je te remercie .

**fsxbo** · 04/01/2015, 15h10

Bonjour herve911
je suis intéressé par ton travail, je développe une gestion des mouvements adossée à un plan de service (unité de soins).
Le principe : ajax pour les requête en arrière plan, mise à jour de picto lorsqu'une info nouvelle est reçue (labo par exemple)... utilisation d'info-bulle...
En premier plan, je souhaite mettre un plan de service avec les chambres et des zones techniques (radio, salles de bain/douche, sorties du service...).
Peut-on échanger sur nos projets ?
bonne année

drag&drop, redirection vers la page de traitement

JavaScript

Discussions similaires

Partager

Partager