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。