使用PHP和jQuery拖放

Question

我在我正在开发的页面上使用以下代码here，并且所有工作都正常。

但是，我会喜欢能够从我的数据库中拉出多列，并将它们格式化在一张桌子上。

我已经尝试了一切，不能得到这个工作。我应该使用HTML表还是其他的东西？下面的代码只是将所有列显示为一个长无格式的行。

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

提前许多感谢，

约翰

Answer 1

使用table tr td和TableDnD插件：

<!-- 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>