可排序列表项作为表单元素

Question

我正在尝试创建一个列表编辑页面，到目前为止，我只是将数据库中的列表值打印到<li>元素中，并且我还使列表可以排序。理想情况下，我想要的是也能够双击要编辑的列表项。我面临的第一个问题是按顺序提交$ _POST格式的<li>项。我尝试使用序列化，但只提供值所在的顺序，而不是值本身。我还尝试在每个<li>之前使用隐藏输入，但同样会出现排序问题。到目前为止，这是我的代码：

HTML / PHP：

echo('<div class="jumbotron">  
<form id="formOne" action="editListTest.php" method="get">
<input type="hidden" value="'.$dbname.'" name="dbname"></input>
<p>Title</p>
<input style="text-align:center; width: 90%" class="form-control input-md" type="text" name="title" value="'.$listname.'">
<pstyle="padding-top:10px">Items</p>


<input type="hidden" name="listitems" id="listitems" value="">
<ol id="sortable" class="rankings">');

$stmt2 = $mysqli2->prepare("SELECT listitems FROM {$dbname}");

$stmt2->execute();
$stmt2->bind_result($item);    
$number = 0;
while ($stmt2->fetch()) {
    $number += 1;
    echo('<li class="notep" id="notep_'.$number.'"">'.$item.'</li>');   
}

?>

</ol>
</input>


<p>
</br>
<input type="button" <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit" id="more_fields" onclick="add_fields();" style="font-size:28; max-height:34px; line-height:34px; padding-top:0px; width:34px; padding-left:9px" value="+" />
<input type="hidden" value="<?php echo($private)?>" name="oldprivate" id="oldprivate"/>
<input type="button" <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit" id="less_fields" onclick="remove_fields();" style="font-size:28; max-height:34px;  line-height:34px; padding-top:0px; width:34px; padding-left:7px" value="-" />
<button <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit">Submit Edits</button>
</p> 
<p>
Keep This List <?php echo($privateString) ?> : <input style="vertical-align:1px" type="checkbox" name="keepprivate" value="1" checked>
</p>
</form>

    使用Javascript / Jquery的：

$('#formOne').submit(function(){

var cerial = $( "#sortable" ).sortable( "serialize");

$('#listitems').val(cerial);

HTML输出（ListItems现在是可拖动的，但我不能按照它们在拖动后的顺序将它们作为数组发送）：

如果有任何想法会很棒，如果您对双击编辑<li>项目有任何想法，那就太棒了。我已经尝试过使用jQuery来切换类并且满足于此，但我已经尝试过这种方式。另外，您知道：editListTest.php是此代码所在的页面，因此它现在只是提交给自己，但它将提交到处理PHP页面，该页面将编辑插入到MYSQL数据库中。

非常感谢任何帮助，

谢谢