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