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