Hallo allemaal,
Ik heb voor een klant een pagina ontwikkeld waar deze middels drag and drop gegevens kan verplaatsen. Kijk hiervoor op www.vanbaasbank.nl/test1.php .
Het gaat om het volgende:
Ik heb een repertoire-tabel waarin liedjes staan met een eigen id-nummer.
Deze worden ingelezen en getoond in een tabel
Nu kan de gebruiker zijn lidejes selecteren d.m.v. slepen en kan de gewenste volgorde aanbrengen en/of wijzigen.
Zodra de selectie compleet is en in de juiste volgorde staat moet e.e.a. in een andere tabel worden opgelsgen met de gewenste volgorde.
Hoe lees ik nu de "ontvangende" tabel uit om dit in een tabel vast te leggen?
Als ik kijk in de broncode zie ik dat er geen info staat in de ontvangende tabel.
Wie heeft voor mij een suggestie?
De code die ik gebruik:
[code]
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<?php include "include/header.inc.php" ; ?>
<?php include "include/zoeken.inc.php" ; ?>
<?php include "include/hoofdmenu.inc.php" ; ?>
<div class="main-container" style="height: 800px;">
<div class="container1" style="height: 800px;">
<article class="box" id="home_featured21" style="height: 800px;">
<!-- Vanaf hier komt de content -->
<div class="album" style="height: 500px;">
<table>
<thead>
<th>Repertoire</th>
</thead>
<tbody>
<?php
$nTeller = 1 ;
while($row = mysqli_fetch_array($cResult)) {
$cDrag = "drag" . $nTeller;
?>
<tr>
<td >
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
<div id="<?php echo $cDrag ; ?>" draggable="true" ondragstart="drag(event)" style="width: 100%;"><?php echo $row['titel'] ; ?></div>
</div>
</td>
</tr>
<?php
$nTeller++;
}
?>
</tbody>
</table>
</div>
<div class="preview">
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)"></div>
</div>
<!-- Tot hier komt de content -->
</article>
</div>
</div>
<?php include "include/footer.inc.php" ; ?>
</body>
George
Resultaat drag and drop opslaan in database
1.984 views
