html5 -可拖动输入元素

我在创建可拖动元素并从Servlet读取它们时遇到了一些问题。

我正在创建一个简单的新闻门户/博客，其中一个要求是我可以创建不同的部分来对文章进行分类。管理员还必须能够从web应用程序中重新安排各部分在屏幕上显示的顺序。

所以，对于这个，我认为一个所有元素都是可拖动的列表是合适的。但是，我偶然发现了无法从servlet读取最终订单的问题。

下面是我正在使用的代码:

<form action="OrderSection" method="post">
    <ul>
        <% for (Section u : listSection) {%>
        <input style="display: none;" 
               id="idSection" name="idSection-<%= i%>" type="number"
               required="required" value="<%= u.getIdSection()%>" />
        <li draggable="true" ondragstart="dragStarted(event)" 
            ondragover="draggingOver(event)" 
            ondrop="dropped(event)"><%= u.getNameSection()%></li>
        <input style="display: none;" 
               id="orderSection" name="orderSection-<%= i%>" type="number"
               required="required" value="<%= i%>" />
        <%i++;%>
        <% } %>
    </ul>
    <input name="total" hidden="hidden" value="<%= listSeccion.size()%>"/>
    <input name="step" hidden="hidden" value="v"/>
    <input type="submit" title="Aceptar"/>
</form>
<script type="text/javascript">
    var source;
    function dragStarted(evt) {
//start drag
        source = evt.target;
//set data
        evt.dataTransfer.setData("text/plain", evt.target.innerHTML);
//specify allowed transfer
        evt.dataTransfer.effectAllowed = "move";
    }
    function draggingOver(evt) {
//drag over
        evt.preventDefault();
//specify operation
        evt.dataTransfer.dropEffect = "move";
    }
    function dropped(evt) {
//drop
        evt.preventDefault();
        evt.stopPropagation();
//update text in dragged item
        source.innerHTML = evt.target.innerHTML;
//update text in drop target
        evt.target.innerHTML = evt.dataTransfer.getData("text/plain");
    }
</script>

我的具体问题是:

1. 我如何在Servlet上读取这些元素，因为它们是li而不是任何类型的输入?
2. 如何按正确的顺序读取?因为DnD改变了元素中的数据，而不是它们的名称，所以我想不出一种以编程方式按正确顺序读取它们的方法。

var listarray = [];
$("ul li").each(function() { listarray.push($(this).text()) });