Drag & Drop with PHP & jQuery - php

Question

I have used the following code found here on a page I am developing and all is working fine.
I would however, like to be able to pull mulitple columns from my database and have them formatted on a table.
I have tried everything and cannot get this to work. Should I be using HTML tables or something else? The code below just displays all columns as one long unformatted row.
<div id="container">
<div id="list">
<ul>
<?php
include("connect.php");
$query = "SELECT id, listorder, description, owner, perc_complete, start_date, end_date FROM acct_project_details WHERE project_id='1' ORDER BY listorder ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$id = stripslashes($row['id']);
$listorder = stripslashes($row['listorder']);
$text = stripslashes($row['description']);
$owner = stripslashes($row['owner']);
$perc_complete = stripslashes($row['perc_complete']);
$start_date = stripslashes($row['start_date']);
$end_date = stripslashes($row['end_date']);
?>
<li id="arrayorder_<?php echo $id ?>">
<?php echo $text; ?>
<?php echo $owner; ?>
<?php echo $perc_complete; ?>
<?php echo $start_date; ?>
<?php echo $end_date; ?>
<div class="clear"></div>
</li>
<?php } ?>
</ul>
</div>
</div>
Many thanks in advance,
John

Answer 1

Use table tr td and TableDnD plugin :
<!-- DOWNLOAD THESE SCRIPTS -->
<script type='text/javascript' src='http://isocra.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://isocra.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='https://github.com/isocra/TableDnD/blob/master/stable/jquery.tablednd.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$("table.dnd").tableDnD();
});
</script>
<div id="container">
<div id="list">
<table class="dnd">
<?php
include("connect.php");
$query = "SELECT id, listorder, description, owner, perc_complete, start_date, end_date FROM acct_project_details WHERE project_id='1' ORDER BY listorder ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$id = stripslashes($row['id']);
$listorder = stripslashes($row['listorder']);
$text = stripslashes($row['description']);
$owner = stripslashes($row['owner']);
$perc_complete = stripslashes($row['perc_complete']);
$start_date = stripslashes($row['start_date']);
$end_date = stripslashes($row['end_date']);
?>
<tr id="arrayorder_<?php echo $id ?>">
<td><?php echo $text; ?></td>
<td><?php echo $owner; ?></td>
<td><?php echo $perc_complete; ?></td>
<td><?php echo $start_date; ?></td>
<td><?php echo $end_date; ?></td>
</tr>
<?php } ?>
</table>
</div>
</div>