html5-可拖动的输入元素

Question

我在创建可拖动元素并从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. 由于这些元素是li而不是任何形式的输入，因此我如何在Servlet上阅读这些元素？
2. 我如何以正确的顺序阅读它们？ 由于DnD会更改元素中的数据，但不会更改其名称，因此我无法想到以适当的顺序以编程方式读取它们的方法。

Answer 1

您可以在提交表单之前循环浏览列表，然后将值存储在数组中并将其传递给服务器。

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

选项将按顺序排列在数组中。 您可以将其编码为字符串，JSON或将其传递给您的服务器。

本示例使用JQuery。