Drag and Drop in HTML5
Ik heb in door mij te ontwikkelen agenda de methode van Drag and Drop toegepast (in HTML5). Het Draggen en Droppen gaat fantastisch.
Nu zit ik met de volgende uitdaging:
Het Drag and Drop vindt plaats in een agenda op basis van een dagindeling. Binnen deze dag mogen afspraken verplaatst worden. In principe wordt er uitgegaan van een afspraak van een uur die altijd op het hele uur staat gepland.
De broninformatie van deze afspraken staat in een SQL-tabel. Door het verplaatsen van een afspraak wijzigt dus ook de aanvangstijd (en daarmee ook de eindtijd)
Nu moet dus de tabel worden bijgewerkt als de afspraak is verplaatst.
****** Toelichting *********
Ik heb in de broncode gezien dat de html-code na het verplaatsen NIET is gewijzigd en de info dus nog op de originele posities staan.
Het stukje HTML waar het Drag And Drop plaatsvindt:
Je kunt de agenda uitproberen op http://www.podiumspektakel.eu/test.php en dan bladeren naar bijv. januari 2014 en kies dan voor de datum van 31 januari. Daar staan twee afspraken gepland.
Code (php)
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
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
<!-- Bron: http://www.w3schools.com/html/html5_draganddrop.asp -->
<div class="box3">
<form action="es-dag.php" method="POST">
<div>
<input type="submit" name="actie" value="<?php echo $cKnop3 ; ?>" />
</div>
</form>
<?php
$nVert = 0;
$nVertMax = 24;
$aDatum = array();
$aUitleg = array();
$aAanvang = array();
$aAuditant = array();
$aEinde = array();
$aIdnr = array();
while($rowUur = mysqli_fetch_array($cResultUur)) {
$aDatum[] = $rowUur['datum'];
$aUitleg[] = $rowUur['onderwerp'];
$aAanvang[] = $rowUur['aanvang'];
$aEinde[] = $rowUur['einde'];
$aIdnr[] = $rowUur['id'];
$aAuditant[] = $rowUur['voornaam'] . " " . $rowUur['tussenvoeg'] . " " . $rowUur['achternaam'];
}
while($nVert < $nVertMax) {
switch($nVert) {
case 0:
$cAanvangstijd = "00:00:00";
break;
case 1:
$cAanvangstijd = "01:00:00";
break;
case 2:
$cAanvangstijd = "02:00:00";
break;
case 3:
$cAanvangstijd = "03:00:00";
break;
case 4:
$cAanvangstijd = "04:00:00";
break;
case 5:
$cAanvangstijd = "05:00:00";
break;
case 6:
$cAanvangstijd = "06:00:00";
break;
case 7:
$cAanvangstijd = "07:00:00";
break;
case 8:
$cAanvangstijd = "08:00:00";
break;
case 9:
$cAanvangstijd = "09:00:00";
break;
case 10:
$cAanvangstijd = "10:00:00";
break;
case 11:
$cAanvangstijd = "11:00:00";
break;
case 12:
$cAanvangstijd = "12:00:00";
break;
case 13:
$cAanvangstijd = "13:00:00";
break;
case 14:
$cAanvangstijd = "14:00:00";
break;
case 15:
$cAanvangstijd = "15:00:00";
break;
case 16:
$cAanvangstijd = "16:00:00";
break;
case 17:
$cAanvangstijd = "17:00:00";
break;
case 18:
$cAanvangstijd = "18:00:00";
break;
case 19:
$cAanvangstijd = "19:00:00";
break;
case 20:
$cAanvangstijd = "20:00:00";
break;
case 21:
$cAanvangstijd = "21:00:00";
break;
case 22:
$cAanvangstijd = "22:00:00";
break;
case 23:
$cAanvangstijd = "23:00:00";
break;
}
?>
<div class="ag_dagindeling_1">
<?php echo $nVert . " uur" ; ?>
</div>
<?php $nVertIdnr = "vertid" . $nVert ; ?>
<div class="ag_dagindeling_2" id="<?php echo $nVertIdnr ; ?>" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
$key = array_search($cAanvangstijd,$aAanvang);
if(substr($cAanvangstijd,0,2) == substr($aAanvang[$key],0,2)) {
$nIdnr = "divid" . $nVert;
?>
<a href="mutatie.php?id=<?php echo $aIdnr[$key] ; ?>">
<div draggable="true" id="<?php echo $nIdnr ; ?>" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
<div><?php echo substr($aAanvang[$key],0,5) . " - " . substr($aEinde[$key],0,5) ; ?></div>
<div><?php echo $aAuditant[$key] ; ?> </div>
</div>]
</a>
<?php } ?>
</div>
<div class="clear"></div>
<?php
$nVert++;
}
?>
<div class="regelhoogte25"></div>
</div>
<div class="box3">
<form action="es-dag.php" method="POST">
<div>
<input type="submit" name="actie" value="<?php echo $cKnop3 ; ?>" />
</div>
</form>
<?php
$nVert = 0;
$nVertMax = 24;
$aDatum = array();
$aUitleg = array();
$aAanvang = array();
$aAuditant = array();
$aEinde = array();
$aIdnr = array();
while($rowUur = mysqli_fetch_array($cResultUur)) {
$aDatum[] = $rowUur['datum'];
$aUitleg[] = $rowUur['onderwerp'];
$aAanvang[] = $rowUur['aanvang'];
$aEinde[] = $rowUur['einde'];
$aIdnr[] = $rowUur['id'];
$aAuditant[] = $rowUur['voornaam'] . " " . $rowUur['tussenvoeg'] . " " . $rowUur['achternaam'];
}
while($nVert < $nVertMax) {
switch($nVert) {
case 0:
$cAanvangstijd = "00:00:00";
break;
case 1:
$cAanvangstijd = "01:00:00";
break;
case 2:
$cAanvangstijd = "02:00:00";
break;
case 3:
$cAanvangstijd = "03:00:00";
break;
case 4:
$cAanvangstijd = "04:00:00";
break;
case 5:
$cAanvangstijd = "05:00:00";
break;
case 6:
$cAanvangstijd = "06:00:00";
break;
case 7:
$cAanvangstijd = "07:00:00";
break;
case 8:
$cAanvangstijd = "08:00:00";
break;
case 9:
$cAanvangstijd = "09:00:00";
break;
case 10:
$cAanvangstijd = "10:00:00";
break;
case 11:
$cAanvangstijd = "11:00:00";
break;
case 12:
$cAanvangstijd = "12:00:00";
break;
case 13:
$cAanvangstijd = "13:00:00";
break;
case 14:
$cAanvangstijd = "14:00:00";
break;
case 15:
$cAanvangstijd = "15:00:00";
break;
case 16:
$cAanvangstijd = "16:00:00";
break;
case 17:
$cAanvangstijd = "17:00:00";
break;
case 18:
$cAanvangstijd = "18:00:00";
break;
case 19:
$cAanvangstijd = "19:00:00";
break;
case 20:
$cAanvangstijd = "20:00:00";
break;
case 21:
$cAanvangstijd = "21:00:00";
break;
case 22:
$cAanvangstijd = "22:00:00";
break;
case 23:
$cAanvangstijd = "23:00:00";
break;
}
?>
<div class="ag_dagindeling_1">
<?php echo $nVert . " uur" ; ?>
</div>
<?php $nVertIdnr = "vertid" . $nVert ; ?>
<div class="ag_dagindeling_2" id="<?php echo $nVertIdnr ; ?>" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
$key = array_search($cAanvangstijd,$aAanvang);
if(substr($cAanvangstijd,0,2) == substr($aAanvang[$key],0,2)) {
$nIdnr = "divid" . $nVert;
?>
<a href="mutatie.php?id=<?php echo $aIdnr[$key] ; ?>">
<div draggable="true" id="<?php echo $nIdnr ; ?>" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
<div><?php echo substr($aAanvang[$key],0,5) . " - " . substr($aEinde[$key],0,5) ; ?></div>
<div><?php echo $aAuditant[$key] ; ?> </div>
</div>]
</a>
<?php } ?>
</div>
<div class="clear"></div>
<?php
$nVert++;
}
?>
<div class="regelhoogte25"></div>
</div>
Wie heeft voor mij een suggestie hoe ik dit kan aanpakken?
George
Gewijzigd op 01/02/2014 14:07:37 door George van Baasbank
Als vervanging van regel 27 tm 99
Ik zou denk ik proberen om na het droppen. een submit() uit te voeren ik neem aan dat het agenda een grote form is? en dan de tijden updaten d.m.v. een functie/class die je erachter hangt.
Bedankt voor de suggestie. Ik heb deze overgenomen
Reshad,
Die bug heb ik ook gezien. Bedankt.
Op dit moment ga ik eerst proberen om:
1. Een database bij te werken
2. Het draggen/droppen over meerdere dagen mogelijk te maken
Op dit moment is het mogelijk om de dag/drop te plaatsen in een soort plakbord maar bij het doorskippen naar een volgende dag ben ik de drop kwijt
Gewijzigd op 01/02/2014 17:39:27 door George van Baasbank
Voor het draggen/droppen over meerdere dagen zou je misschien een vak kunnen maken waar je de items in kunt schuiven, die je daarna opnieuw ergens in kunt plannen.
Ook vind ik de knoppen boven je agenda erg onduidelijk. Vorige dag >.....Volgende dag >.....Terug naar agenda >
Misschien is het mooier om zoiets te doen < Vorige dag......Volgende dag >.....Terug naar agenda
Gewijzigd op 01/02/2014 18:03:50 door D B