Drag & Drop with PHP & jQuery

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>