Drag and Drop in HTML5

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

01/02/2014 13:37:48
Quote Anchor link
Hallo allemaal,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!-- 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>


Wie heeft voor mij een suggestie hoe ik dit kan aanpakken?

George
Gewijzigd op 01/02/2014 14:07:37 door George van Baasbank
 
PHP hulp

PHP hulp

24/11/2020 16:12:47
 
Ivo P

Ivo P

01/02/2014 15:06:32
Quote Anchor link
ik stel voor:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php $cAanvangstijd = sprintf('%02d:00:00', $nVert); ?>


Als vervanging van regel 27 tm 99
 
Reshad F

Reshad F

01/02/2014 16:33:48
Quote Anchor link
Er zit ook een bug in want ik kan niet alleen de afspraak maar ook de balkjes erachter verplaatsen.. :p

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.
 
George van Baasbank

George van Baasbank

01/02/2014 17:38:32
Quote Anchor link
Ivo,

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
 
D B

D B

01/02/2014 18:03:20
Quote Anchor link
Die Bug zit hem er denk ik in dat je de div zelf ook draggable hebt gemaakt.

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.