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>

我遇到的具体问题是：

如何阅读Servlet上的这些元素，因为它们是li而不是任何类型的输入？
如何以正确的顺序阅读？由于DnD会更改元素中的数据，而不是更改其名称，因此我无法想出以正确的顺序以编程方式读取它们的方法。

Answer 1

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

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

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

此示例使用JQuery。

html5 - 可拖动的输入元素

1 个答案: